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

【问题标题】：Angularjs if-then-else construction in expressionAngularjs if-then-else 表达式中的构造
【发布时间】：2013-05-11 03:56:12
【问题描述】：

我可以在 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 构造的可能性很感兴趣。谢谢。

【问题讨论】：

查看ng-switch
从 1.2 开始支持。

标签： javascript angularjs if-statement angularjs-ng-repeat ternary-operator

【解决方案1】：

您可以轻松使用 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>

【讨论】：

像这样在元素级别而不是在表达式内部这样做的好处是您可以更多地自定义不同选项的样式和内容。
是的，我知道这个功能可能会有所帮助，但我不想在文档中添加额外的 div。但也谢谢

【解决方案2】：

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"}}

【讨论】：

&&需要转义吗？
@caffinatedmonkey 不，你不能。您可以（如果可能的话）使用三元运算符，就像我在对主题问题的回答中解释的那样。
@Sebastian < 和 > 作为比较运算符怎么样？
@caffinatedmonkey 没问题，{{1>0?true:false}} 或 {{1>0}} 随便你。 {{1>0}} 也适用于 1.0.8，但三元运算符不适用。
这仍然是一个很好的答案，因为它在 angular-ui 组件的设置中工作（而三元运算符由于某种原因在那里不起作用）。也许这有助于努力设置 angular-ui 参数的人

【解决方案3】：

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

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

{{true?true:false}}

【讨论】：

由于历史原因（可能 plnkr.co 将来由于某种原因下线）这是我示例的主要代码：{{true?true:false}}
正是我想要的，谢谢，几乎使用了过滤器来做到这一点。
@IgorCh：您可能想要更新已接受的答案:)

【解决方案4】：

这可以在一行中完成。

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

在td 标签中的用法：

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

【讨论】：

【解决方案5】：

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

{{ CONDITION ? TRUE : FALSE }}

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

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

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

【讨论】：