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
Share Improve this question edited Jun 7, 2019 at 9:22 R3tep 12.9k10 gold badges51 silver badges76 bronze badges asked May 24, 2014 at 18:58 PrimeLensPrimeLens 2,6974 gold badges24 silver badges28 bronze badges2 Answers
Reset to default 21Remember 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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1738491098a4052205.html
评论列表（0条）