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. 创建一个过滤器以显示用户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标签，我会使用它。

Answer 2

您需要ng-if或ng-show。如果你想保持元素可见，你可以试试这个：

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

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