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. 仅使用角度表达式：

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

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

1. 创建一个过滤器以显示用户标识：

   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标记，我将使用它。

Answer 2

您将需要ng-if或ng-show。 如果要保持元素可见，则可以尝试以下操作：

{{ username && userId ? (username + "(" + userid + ")") : "" }}

可能需要进行编辑以处理空白/零。