如何使用AngularJS(在模板中)实现三元?
使用一些html属性(类和样式)而不是创建和调用控制器的函数会很好。
如何使用AngularJS(在模板中)实现三元?
使用一些html属性(类和样式)而不是创建和调用控制器的函数会很好。
当前回答
对于angular模板中的文本(userType是$scope的属性,比如$scope.userType):
<span>
{{userType=='admin' ? 'Edit' : 'Show'}}
</span>
其他回答
更新:Angular 1.1.5添加了一个三元运算符,所以现在我们可以简单地编写
<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">
如果你使用的是早期版本的Angular,你有两个选择:
(条件&& result_if_true || !条件&& result_if_false) {true: 'result_if_true', false: 'result_if_false'}[条件]
项目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>
如果有人还像我一样在遗留代码上工作,你也可以在ng风格中使用三元操作符来实现这一点,如下所示:
<li ng-style="{'color': connected ? '#008000' : '#808080'}"></li>
在这里:三元运算符在1.1.5中被添加到角解析器!参见更新日志
这是一个小提琴显示在ng-class指令中使用的新三元运算符。
ng-class="boolForTernary ? 'blue' : 'red'"
这个答案早于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>
更新: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>