如何使用AngularJS(在模板中)实现三元?
使用一些html属性(类和样式)而不是创建和调用控制器的函数会很好。
如何使用AngularJS(在模板中)实现三元?
使用一些html属性(类和样式)而不是创建和调用控制器的函数会很好。
当前回答
更新: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>
or:
<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>
更新: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>
or:
<li ng-disabled="currentPage == 0" ng-click="currentPage=0" class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>
虽然你可以在旧版本的angular中使用条件&& if-true-part || if-false-part-syntax,但通常的三元运算符条件?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>
在这里:三元运算符在1.1.5中被添加到角解析器!参见更新日志
这是一个小提琴显示在ng-class指令中使用的新三元运算符。
ng-class="boolForTernary ? 'blue' : 'red'"