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

Question

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.

Cosmin Ababei · Accepted Answer · 2016-09-29 12:54:34Z

7

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>

edited Sep 29, 2016 at 12:54

Cosmin Ababei

7,0722 gold badges22 silver badges35 bronze badges

answered Sep 29, 2016 at 12:53

Daniel A. White

192k49 gold badges389 silver badges474 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Niraj Over a year ago

this is best answer to the question.

Brad Over a year ago

Perfect! Essentially the || makes the value null so Hello doesn't appear anymore?

Daniel A. White Over a year ago

@BradleySmith no. empty string is falsy, so the || behaves like javascript's || and returns the right handside.

kaleemullah · Accepted Answer · 2016-09-29 12:51:56Z

1

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

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

answered Sep 29, 2016 at 12:51

kaleemullah

517 bronze badges

Comments

Satpal · Accepted Answer · 2016-09-29 12:52:24Z

1

Use another variable

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

and then in controller

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

answered Sep 29, 2016 at 12:52

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Aakash Thakur · Accepted Answer · 2016-09-29 16:18:14Z

-2

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!!

edited Sep 29, 2016 at 16:18

answered Sep 29, 2016 at 12:57

Aakash Thakur

3,90510 gold badges35 silver badges65 bronze badges

8 Comments

Niraj Over a year ago

this is not an angular way.

Sudharsan S Over a year ago

@Aakash - Yes ofcourse your code works, There are numbers ways to acheive the goal. but we take only the smartest way like Daniel answered.

Aakash Thakur Over a year ago

Angular way was not asked. Had it been asked that way, my solution would have been different. Hope it helps somebody. @ni3aj

Aakash Thakur Over a year ago

Agree. Cheers!! @SudharsanS

Aakash Thakur Over a year ago

I don't think that Daniel's functionality is implementing the solution properly. I mean the requirement was I need the Hello in the H1 tag to stay and only disappear when the user clicks the input field to start typing. In Daniel's solution, on clicking the input box Hello still stays. Once you start typing, then it goes away.Correct me if I am wrong @SudharsanS

|

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related