javascript - AngularJS:大括号中的字符串和变量

Question

我有一个变量 username和一个变量 userid .
我想在 input 中显示名称和括号中的 ID像这样:

Name (ID)

在 angularjs 中我做 <input value="{{username}} ({{userid}})" />这导致丑陋的()什么时候username和 userid是空的。

有没有比使用 ng-if 更简单的方法？解决我的问题。
类似于 {{ username + "(" + userid + ")"}} ？

Answer 1

这个 jsfiddle 提供了 4 个选项。选择更适合你的:

http://plnkr.co/edit/Su6udFHxIVEWmEpvulXZ?p=preview

1. 仅使用 Angular 表达式:

   {{ name ? '(' + name + ')' : ''}}

大多数时候我不会使用它，如果您不需要任何可重用的东西，这是最直接的方法。

1. 创建过滤器以显示用户 ID:

   app.filter('userIdDisplay', function () {
return function (input) {
return input ? '(' + input + ')' : '';
};
});

   {{ name | userIdDisplay }}

如果你有一个比括号更复杂的非常具体的格式，我会使用它

1. 如果某个变量具有真值，则创建一个通用过滤器以显示字符串:

   app.filter('ifExists', function () {
return function (input, variable) {
return variable ? input : '';
};
});

   {{ '(' + name + ')' | ifExists:name }}

我会将其用于具有简单显示的字符串，例如仅添加括号。

1. 使用 ng-if 或 ng-show 并用 span 换行:

   <span ng-if="name">({{ name }})</span>

如果它不仅是字符串格式，而且您还想有条件地显示其他指令或纯 html 标签，我会使用它。