你如何用 AngularJS（在模板中）做一个三元组？
最好在 html 属性（类和样式）中使用一些，而不是创建和调用控制器的函数。
AngularJS 模板中的三元运算符
IT技术
javascript
html
angularjs
ternary-operator
2021-01-25 12:08:18
6个回答
更新：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>
更新： 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>
对于角度模板中的文本（userType是 $scope 的属性，如 $scope.userType）：
<span>
{{userType=='admin' ? 'Edit' : 'Show'}}
</span>
虽然您可以condition && if-true-part || if-false-part在旧版本的 angular 中使用-syntax，但通常的三元运算符condition ? true-part : false-part在Angular 1.1.5 及更高版本中可用。
此答案早于版本1.1.5，其中$parse函数中的适当三元不可用。如果您使用的是较低版本或作为过滤器的示例，请使用此答案：
angular.module('myApp.filters', [])
.filter('conditional', function() {
return function(condition, ifTrue, ifFalse) {
return condition ? ifTrue : ifFalse;
};
});
然后将其用作
<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>