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及更高版本的三元运算符，如此小plunker中所示（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' }}

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

5 个答案: