Angular JS在ng-class Directive中提供了这个功能。你可以在里面放置条件，也可以赋值条件类。您可以通过两种不同的方式来实现这一点。

1型

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

在此代码中，类将根据状态值的值应用

如果status值为0，则应用类1

如果status值为1，则应用类2

如果status值为2，则应用类3

2型

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

将在哪个类中应用状态值

如果status值为1或true，则添加类test_yes

如果status值为0或false，则添加类test_no

当有人必须运行复杂的逻辑来决定合适的CSS类时，使用function和ng-class是一个很好的选择。

http://jsfiddle.net/ms403Ly8/2/

HTML:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS:

.testclass { Background: lightBlue}

JavaScript:

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

对于Angular 2，使用这个

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

我将向您展示动态应用ng-class的两个方法

步骤1

通过使用三元运算符

<div ng-class="condition?'class1':'class2'"></div>

输出

如果你的条件为真，那么class1将应用到你的元素，否则将应用class2。

缺点

当您尝试在运行时更改条件值时，该类将以某种方式不会更改。因此，如果你有动态类更改的要求，我建议你去step2。

步骤2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

输出

如果你的条件与value1匹配，那么class1将被应用到你的元素，如果与value2匹配，那么class2将被应用，以此类推。动态类更改可以很好地使用它。

希望这对你有所帮助。

在ng-repeat中使用ng-class

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

对于任务中的每个状态。Status为该行使用不同的类。

我看到上面的例子，但他们都开始花括号(json地图)。另一种选择是返回基于计算的结果。结果也可以是一个css类名的列表(不仅仅是map)。例子:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

or

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

说明:如果状态为active，则将使用enabled类。否则，将使用禁用的类。

列表[]用于使用多个类(而不是一个)。