AngularJS模板中的三元运算符

Question

你如何使用AngularJS三元组(在模板中)？

在html属性(类和样式)中使用一些而不是创建和调用控制器的函数会很好.

Answer 1

更新:Angular 1.1.5增加了一个三元运算符,所以现在我们可以简单地编写

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

如果您使用的是早期版本的Angular,您的两个选择是:

1. (condition && result_if_true || !condition && result_if_false)
2. {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. 一串以空格分隔的类名
2. 一组类名
3. 类名的映射/对象为布尔值.

上面给出了1)的一个例子.这是一个3的例子,我认为它读得更好:

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

第一次通过ng-repeat循环,添加了类myClass.第3次通过($ index从0开始),添加了class anotherClass.

ng-style采用必须将CSS样式名称的地图/对象评估为CSS值的表达式.例如,

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

Answer 2

更新: 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>

Answer 3

对于角度模板中的文本(userType是$ scope的属性,如$ scope.userType):

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>

Answer 4

到目前为止,我们都发现版本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>

Answer 5

虽然您可以condition && if-true-part || if-false-part在旧版本的角度中使用-syntax,但通常的三元运算符condition ? true-part : false-part在Angular 1.1.5及更高版本中可用.

Answer 6

它是:三元运算符被添加到1.1.5中的角度解析器!看到更改日志

这是一个小提琴,展示了ng-class指令中使用的新三元运算符.

ng-class="boolForTernary ? 'blue' : 'red'"