angular,ng-if如何更改文本?

时间:2014-05-24 18:58:43

标签: javascript angularjs

我给出了以下代码

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

哪些输出&#39;在线书店&#39;

如果我输入&#39; Fred&#39;它输出了弗雷德在线书店&#39;

不使用jQuery,并以角度方式处理,我如何更改代码,以便在输入不为空时添加占有性撇号和字母s?

EG

输入为空时在线书店,

弗雷德的在线书店,当输入包含&#39;弗雷德&#39;串

2 个答案:

答案 0 :(得分:16)

请记住,范围只是您可以评估事物的地方。这正是我们能做的。 ?是格式为(expression)?<true clause>:<false clause>;的三元运算符,等于:

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

修改后的代码:

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

修改 虽然这有效,但它可能会更好,因为其他人指出隐藏视图中的逻辑。这可以通过调用范围函数或对变量应用过滤器来按预期转换它来完成。

答案 1 :(得分:4)

使用过滤器!

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

然后:

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