CODEWITHSUNDEEP
javascriptjqueryangularjs
Brad
Brad

Reputation: 99

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.

Upvotes: 2

Views: 551

Answers (4)

Aakash Thakur
Aakash Thakur

Reputation: 3895

Wrap your Hello inside a span as:

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

  <h1><span id="temp">Hello </span>{{yourName}}</h1>
</div>

Now you can write this jquery to make your functionality work:

    $("input").focus(function(){
        $("#temp").hide();
    })

    $("input").blur(function(){
        $("#temp").show();
    })

Link attached now:http://codepen.io/Sky-123/pen/jrLBRA

Hope this helps!!

Upvotes: -2

Daniel A. White
Daniel A. White

Reputation: 190943

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>

Upvotes: 7

Satpal
Satpal

Reputation: 133403

Use another variable

<h1>{{ myLabel }}{{yourName}}</h1>

and then in controller

$scope.myLabel = 'Text as you please'; //'' to clear

Upvotes: 1

kaleemullah
kaleemullah

Reputation: 51

you can keep the hello text into one span and give it a class.

<span ng-if="yourName">hell0</span>

Upvotes: 1

Related Questions