AngularJS 模板中的三元运算符

更新：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>

$first在第一个元素的 ng-repeat 中设置为 true，因此上述内容将仅在第一次通过循环时应用类 'myClass1' 和 'myClass2'。

使用ng-class有一种更简单的方法：ng-class采用必须计算为以下之一的表达式：

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

上面给出了1）的例子。下面是 3 个示例，我认为它读起来要好得多：

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

第一次通过 ng 重复循环时，将添加类 myClass。第三次通过（$index从 0 开始），将添加类 otherClass。

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

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

更新：Angular 1.1.5 添加了一个三元运算符，此答案仅适用于 1.1.5 之前的版本。对于 1.1.5 及更高版本，请参阅当前接受的答案。

在 Angular 1.1.5 之前：

angularjs 中三元的形式是：

((condition) && (answer if true) || (answer if false))

例如：

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

艺术

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>