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

问题描述 投票:107回答:4

我可以以某种方式在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构造。谢谢。

javascript angularjs if-statement angularjs-ng-repeat ternary-operator
4个回答
215
投票

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

38
投票

您可以使用从1.1.5及更高版本开始的三元运算符,就像在这个小plunker中演示的那样(1.1.5中的示例):

由于历史原因(也许plnkr.co将来因某种原因而失败)这里是我的例子的主要代码:

{{true?true:false}}

25
投票

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

0
投票

这可以在一行中完成。

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

用于td标签:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
© www.soinside.com 2019 - 2024. All rights reserved.