javascript - AngularJs, ng-if to change text? - Stack Overflow

admin管理员组

文章数量:1193749

I'm given the following code

 <h2>{{ownername}} Online Bookshop</h2>
 <input placeholder="type your name" ng-model="ownername" >

Which outputs 'Online Bookshop'

and if I input 'Fred' it outputs 'Fred Online Bookshop'

Without using jQuery, and doing things the angular way, how would I change the code so that a possessive apostrophe and the letter s were added when input is not empty?

EG

Online Bookshop when input is empty, and

Fred's Online Bookshop when input contains 'Fred' string

I'm given the following code

 <h2>{{ownername}} Online Bookshop</h2>
 <input placeholder="type your name" ng-model="ownername" >

Which outputs 'Online Bookshop'

and if I input 'Fred' it outputs 'Fred Online Bookshop'

Without using jQuery, and doing things the angular way, how would I change the code so that a possessive apostrophe and the letter s were added when input is not empty?

EG

Online Bookshop when input is empty, and

Fred's Online Bookshop when input contains 'Fred' string

• javascript
• angularjs

Share Improve this question Follow edited Jun 7, 2019 at 9:22 R3tep 12.9k1010 gold badges5151 silver badges7676 bronze badges asked May 24, 2014 at 18:58 PrimeLensPrimeLens 2,69744 gold badges2424 silver badges2828 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 21

Remember that the scope is just a place where you can evaluate things. So thats exactly what we can do. The ? is a ternary operator of the form: (expression)?<true clause>:<false clause>; and is equal to:

if(expression) { <true clause>; }
else { <false clause>; }

Modified code:

<h2>{{ ownername.length ? ownername + "'s " : "" }}Online Bookshop</h2>
<input placeholder="type your name" ng-model="ownername" >

Edit: Even though this works, its probably better as others point out to hide the logic from the view. This can be done by calling a scope function, or applying a filter to the variable to transform it as expected.

Use a filter!

app.filter('possessive', function() {
  return function(val) {
    if (!val) return '';
    return val + '\'s';
  };
});

Then:

<h2>{{ ownername | possessive }} Online Bookshop</h2>

本文标签： javascriptAngularJSngif to change textStack Overflow