AngularJS模板中的三元运算符

Answer 1

更新:Angular 1.1.5增加了一个三元运算符，所以现在我们可以简单地编写

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

如果您使用的是Angular的早期版本，您的两个选择是：

1. （条件&&result_if_true！条件&&result_if_false)
2. {true:'result_if_true',false:'result_if_false'}[条件]

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

对于ng-class，有一个更简单的方法：ng-class接受一个表达式，该表达式的计算结果必须为以下之一：

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

上面给出了1）的一个例子，下面是3的一个例子，我觉得读起来要好些：

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

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