AngularJs，ng-如果要更改文本？

Question

我得到了以下代码

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

输出'Online Bookshop‘

如果我输入'Fred‘，它会输出'Fred Online Bookshop’。

在不使用jQuery的情况下，如何更改代码，以便在输入不为空的情况下添加所有格撇号和字母s？

例如

当输入为空时在线书店，以及

当输入包含'Fred‘字符串时，Fred的在线书店

Answer 1

记住，作用域只是一个你可以评估事物的地方。这就是我们所能做的。?是一个形式为：(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" >

编辑：尽管这是可行的，但正如其他人指出的那样，从视图中隐藏逻辑可能更好。这可以通过调用作用域函数，或者对变量应用筛选器来按预期进行转换来完成。

Answer 2

使用过滤器！

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

然后：

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