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


109

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

<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构造的可能性我很有趣。谢谢。



3
从1.2开始,现在支持。
nilskp 2014年

Answers:


219

角表达式在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"}}

&&是否需要逃脱?
0xcaff 2014年

@caffinatedmonkey不,你一定不能。您可以(如果可能的话,在您的项目中)使用三元运算符,就像我在主题问题答案中所解释的那样。
塞巴斯蒂安2014年

@Sebastian <以及>作为比较运算符呢?
0xcaff 2014年

@caffinatedmonkey也没问题,{{1> 0?true:false}}或{{1> 0}}随便。{{1> 0}}在1.0.8中也有效,但三元运算符则无效。
塞巴斯蒂安

这仍然是一个很好的答案,因为它可以在angular-ui组件的设置中使用(而三元运算符由于某种原因不能在其中使用)。也许这可以帮助有人努力设置ui角度参数
Olga Gnatenko 2014年

39

从1.1.5版及更高版本开始,您可以使用三元运算符,如该小插件所示(在1.1.5中的示例):

出于历史原因(也许出于将来某个原因plnkr.co退出),这是我的示例的主要代码:

{{true?true:false}}

出于历史原因(也许出于将来某些原因,plnkr.co停止运行),这是我的示例的主要代码:{{true?true:false}}
Sebastian

1
正是我想要的东西,谢谢,几乎用一个过滤器来做到这一点。
不可变的砖块2014年

1
@IgorCh:您可能要更新接受的答案:)
的Răzvan弗拉菲乌斯熊猫

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>

在这样的元素级别而不是在表达式内部执行此操作的一个好处是,您可以自定义更多选项的样式和内容。
SUPR

是的,我知道此功能可能会有所帮助,但我不想在文档中添加额外的div。但也要感谢
IgorCh

0

可以一行完成。

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

td标签中的用法:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.