三元模板
你如何做AngularJS的三元（在模板中）？
这将是很好的使用一些在HTML属性（类和风格），而不是创build和调用控制器的function。
更新 ：Angular 1.1.5添加了一个三元运算符 ，所以现在我们可以简单地写
<li ng-class="$first ? 'firstRow' : 'nonFirstRow'"> 如果您使用Angular的早期版本，您的两个select是：
-
(condition && result_if_true || !condition && result_if_false) -
{true: 'result_if_true', false: 'result_if_false'}[condition]
上面的项目2.创build一个具有两个属性的对象。 数组语法用于select名称为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需要一个expression式，它必须计算以下之一：
- 一个空格分隔的类名string
- 一个类名的数组
- 类名的映射/对象为布尔值。
上面给出了1）的一个例子。 这里是一个3的例子，我认为这个例子好多了：
<li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>
第一次通过ng-repeat循环，类myClass被添加。 第三次通过（$ index从0开始），class anotherClass被添加。
ng-style采用一个expression式，它必须将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之前：
三angular形的forms是：
((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>
对于angular模板中的文本（ userType是$ scope的属性，如$ scope.userType）：
<span> {{userType=='admin' ? 'Edit' : 'Show'}} </span>
到目前为止，我们都发现版本1.1.5在$parse函数中有一个适当的三元组，所以只需使用这个答案作为filter的例子：
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>
那里是：三元运算符被添加到1.1.5的angular度分析器！ 看到更新日志
这里是一个小提琴，显示ng-class指令中使用的新三元运算符。
ng-class="boolForTernary ? 'blue' : 'red'"
虽然可以使用condition && if-true-part || if-false-part 在旧版本的angular度，通常的三元运算符condition ? true-part : false-part condition && if-true-part || if-false-part -syntax condition ? true-part : false-part condition ? true-part : false-part在Angular 1.1.5及更高版本中可用。
<body ng-app="app"> <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'" class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button> <div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;"> <div class="panel-heading">Take Quiz</div> <div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;"> <button type="button" class="btn btn-default">Start Quiz</button> </div> </div> </body>
button切换和更改button的标题，并显示/隐藏div面板。 见普伦克
