javascript - Angularjs if-then-else 表达式中的构造

Question

我可以在 angularjs 表达式中以某种方式使用 if-then-else 构造（三元运算符）吗，例如我有函数 $scope.isExists(item) 必须返回 bool 值。我想要这样的东西

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>

我知道我可以使用返回字符串的函数，我对在表达式中使用 if-then-else 构造的可能性很感兴趣。谢谢。

Answer 1

Angular 表达式在 1.1.5 之前不支持三元运算符，但可以这样模拟：

condition && (answer if true) || (answer if false)

因此，例如，这样的事情会起作用：

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>

更新： Angular 1.1.5 增加了对三元运算符的支持：

{{myVar === "two" ? "it's true" : "it's false"}}

Answer 2

您可以从 1.1.5 及更高版本开始使用三元运算符，就像这个小插件中演示的那样（1.1.5 中的示例）：

出于历史原因（也许 plnkr.co 将来由于某种原因下线）这是我示例的主要代码：

{{true?true:false}}

Answer 3

您可以轻松地使用 ng-show，例如：

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-show="isExists(item)">available</div>
        <div ng-show="!isExists(item)">oh no, you don't have it</div>
    </div>

对于更复杂的测试，您可以使用 ng-switch 语句：

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-switch on="isExists(item)">
            <span ng-switch-when="true">Available</span>
            <span ng-switch-default>oh no, you don't have it</span>
        </div>
    </div>

Answer 4

这可以在一行中完成。

{{corretor.isAdministrador && 'YES' || 'NÂO'}}

td标签中的用法：

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>

Answer 5

我正在尝试检查一个键是否以角度方式存在于数组中并在此问题上着陆。在我的 Angularjs 1.4 三元运算符中，如下所示

{{ CONDITION ? TRUE : FALSE }}

因此对于数组键存在我做了一个简单的JS检查

解决方案 1：{{ array['key'] !== undefined ? array['key'] : 'n/a' }}

解决方案 2：{{ "key" in array ? array['key'] : 'n/a' }}