AngularJS模板中的三元运算符

Question

如何使用AngularJS（在模板中）进行三元运算？

最好在html属性中使用一些属性（类和样式），而不是创建和调用控制器的函数。

Answer 1

更新 ：Angular
1.1.5添加了一个三元运算符，因此现在我们可以简单地编写

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

如果使用的是较早版本的Angular，则有两个选择：

1. (condition && result_if_true || !condition && result_if_false)
2. {true: 'result_if_true', false: 'result_if_false'}[condition]

上面的项目2创建具有两个属性的对象。数组语法用于选择名称为true的属性或名称为false的属性，并返回关联的值。

例如，

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

$ ng在第一个元素的ng-repeat中设置为true，因此上面仅在循环中第一次应用类’myClass1’和’myClass2’。

使用 ng-class时， 有一种更简单的方法：ng-class接受一个表达式，该表达式必须计算以下值之一：

1. 一串用空格分隔的类名
2. 类名数组
3. 类名到布尔值的映射/对象。

上面给出了1）的示例。这是3的示例，我认为它读起来更好：

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

第一次通过ng-repeat循环，添加了类myClass。第三次（$ index从0开始），添加了anotherClass类。

ng-style 采用一个表达式，该表达式必须计算为CSS样式名称与CSS值的映射/对象。例如，

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>