Ng-class支持必须求值为任意一个的表达式

以空格分隔的类名字符串，或者 类名数组，或 类名到布尔值的映射/对象。

因此，使用表单3，我们可以简单地写

ng-class="{'selected': $index==selectedIndex}"

参见如何在AngularJS中有条件地应用CSS样式?更广泛的答案。

更新:Angular 1.1.5增加了对三元操作符的支持，所以如果你对这个结构更熟悉的话:

ng-class="($index==selectedIndex) ? 'selected' : ''"

如果你想超越二进制计算，让你的CSS远离你的控制器，你可以实现一个简单的过滤器，根据map对象计算输入:

angular.module('myApp.filters, [])
  .filter('switch', function () { 
      return function (input, map) {
          return map[input] || '';
      }; 
  });

这允许你像这样写你的标记:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>

下面是另一个在ng-class不能使用时工作得很好的选项(例如在样式化SVG时):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(我认为你需要使用最新的不稳定Angular才能使用ng-attr-，我目前使用的是1.1.4)

检查这个。

臭名昭著的AngularJS if|else语句!! 当我开始使用Angularjs时，我有点惊讶地发现我找不到if/else语句。

所以我在一个项目上工作，我注意到当使用if/else语句时，条件显示在加载时。 您可以使用ng-cloak来修复这个问题。

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-斗篷{显示:none}

由于火绒

这是我在工作中多次有条件的判断:

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>

Ng-class支持必须求值为任意一个的表达式

以空格分隔的类名字符串，或者 类名数组，或 类名到布尔值的映射/对象。

因此，使用表单3，我们可以简单地写

ng-class="{'selected': $index==selectedIndex}"

参见如何在AngularJS中有条件地应用CSS样式?更广泛的答案。

更新:Angular 1.1.5增加了对三元操作符的支持，所以如果你对这个结构更熟悉的话:

ng-class="($index==selectedIndex) ? 'selected' : ''"