我最喜欢的方法是使用三元表达式。

ng-class="condition ? 'trueClass' : 'falseClass'"

注意:如果你使用的是旧版本的Angular，你应该使用这个，

ng-class="condition && 'trueClass' || 'falseClass'"

这里有一个更简单的解决方案:

function MyControl($scope){ $scope.values = ["a","b","c","d","e","f"]; $scope.selectedIndex = -1; $scope.toggleSelect = function(ind){ if( ind === $scope.selectedIndex ){ $scope.selectedIndex = -1; } else{ $scope.selectedIndex = ind; } } $scope.getClass = function(ind){ if( ind === $scope.selectedIndex ){ return "selected"; } else{ return ""; } } $scope.getButtonLabel = function(ind){ if( ind === $scope.selectedIndex ){ return "Deselect"; } else{ return "Select"; } } } .selected { color:red; } <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> <div ng-app ng-controller="MyControl"> <ul> <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li> </ul> <p>Selected: {{selectedIndex}}</p> </div>

我建议你用一个返回true或false的函数来检查控制器中的条件。

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

在你的控制器中检查情况

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}

如果你不想像我一样把CSS类名放在控制器中，这里有一个我从v1时代以前就使用的老技巧。我们可以编写一个表达式，直接计算所选的类名，不需要自定义指令:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

请注意使用冒号的旧语法。

还有一种新的更好的有条件地应用职业的方法，比如:

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

Angular现在支持返回对象的表达式。该对象的每个属性(名称)现在都被视为一个类名，并根据其值应用。

然而，这些方式在功能上并不相等。这里有一个例子:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

因此，我们可以通过将模型属性映射到类名来重用现有的CSS类，同时将CSS类排除在Controller代码之外。

我最近遇到了一个类似的问题，决定只创建一个条件过滤器:

  angular.module('myFilters', []).
    /**
     * "if" filter
     * Simple filter useful for conditionally applying CSS classes and decouple
     * view from controller 
     */
    filter('if', function() {
      return function(input, value) {
        if (typeof(input) === 'string') {
          input = [input, ''];
        }
        return value? input[0] : input[1];
      };
    });

它接受一个参数，该参数是一个2元素数组或一个字符串，它被转换为一个数组，并将一个空字符串作为第二个元素:

<li ng-repeat="item in products | filter:search | orderBy:orderProp |
  page:pageNum:pageLength" ng-class="'opened'|if:isOpen(item)">
  ...
</li>

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

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

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