如何使用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'"