Bradley Smith Bradley Smith - 2 months ago 7
AngularJS Question

How to remove text before {{expression}} in AngularJS

I'm having troubles with a simple idea. How do I remove the "Hello" when the user clicks the input field to only show the text that they are typing.

I need the "Hello" in the H1 tag to stay and only disappear when the user clicks the input field to start typing.

<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">

<h1>Hello {{yourName}}</h1>
</div>


I have tried using jquery to empty or detach the H1 tag but that takes away the expression also.

Thank you for your help.

Answer

You could do it within the binding syntax:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app>
  <label>Name:</label>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">

  <h1>{{yourName || 'Hello'}}</h1>
</div>

Comments