你如何用 AngularJS(在模板中)做一个三元组?
在 html 中使用一些属性(类和样式)而不是创建和调用控制器的函数会很好。
更新 :Angular 1.1.5 添加了一个三元运算符,所以现在我们可以简单地编写
<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">
如果您使用的是早期版本的 Angular,您的两个选择是:
(condition && result_if_true || !condition && result_if_false)
{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) 的示例。这是 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>