在前端开发中，我们常常需要动态地修改DOM元素的class属性。AngularJS提供了一个方便易用的指令ng-class，可以根据表达式的值动态地添加或删除class。
基本语法
ng-class指令可以接收一个对象、一个数组或一个表达式作为参数。当参数为对象时，ng-class会根据对象的键值对来判断是否添加或删除class。如果值为真，则添加对应的class；如果值为假，则删除对应的class。例如：
<!-- 根据scope变量isActive的值来添加或删除active类 --> <div ng-class="{ active: isActive }"></div>
当参数为数组时，ng-class会将数组中的每个元素都当作class名字添加到元素上。例如：
<!-- 动态添加多个class --> <div ng-class="[ 'large', isSpecial ? 'special' : '' ]"></div>
当参数为表达式时，ng-class会根据表达式的值来判断是否添加或删除class。表达式可以是一个字符串、一个布尔值或一个返回class名字的函数。例如：
<!-- 根据isActive的值来切换active类 --> <div ng-class="isActive ? 'active' : ''"></div> <!-- 根据函数返回值来添加或删除class --> <div ng-class="getClass()"></div>
高级用法
ng-class还支持一些高级用法，可以更加灵活地控制class的切换。
在嵌套元素上使用
当我们需要在嵌套的元素上添加class时，可以使用ng-class指令的子属性语法。例如：
<!-- 根据isActive的值来添加或删除外层和内层元素的active类 --> <div ng-class="{ active: isActive }"> <span ng-class="{ active: isActive }"></span> </div>
使用函数返回对象
我们也可以让ng-class接收一个返回对象的函数作为参数。这个函数会在每次digest周期中被调用，可以根据当前scope状态动态计算class名字。例如：
<!-- 根据scope变量color的值来添加不同的颜色类 --> <div ng-class="getColor()"></div>
$scope.getColor = function () { return { red: $scope.color === 'red', green: $scope.color === 'green', blue: $scope.color === 'blue' }; };
使用$index变量
在ng-repeat指令中，我们可以使用$index变量来引用当前循环的索引值。例如：
<!-- 根据当前循环的索引值来添加或删除class --> <div ng-repeat="item in items" ng-class="{ odd: $index % 2 === 0, even: $index % 2 !== 0 }"></div>
示例代码
下面是一个简单的示例，演示了如何使用ng-class指令来切换class：
-- -------------------- ---- ------- --------- ----- ----- ------- ------ ----- ---------------- ---------------- ------------------ ------- ------- - ----------------- ------- - -------- ------- ----- ----------------- - ------- ---- ----------- ------- -------- ------------------ ------- ------------------ - --------------------------- ------- ------------------------------------------------------------------------ ------- -------展开代码
在这个示例中，我们创建了一个DIV元素，并使用ng-class指令将active类绑定到它上面。我们还创建了一个按钮，点击后会切换isActive变量的值，从而切换class。
总结
ng-class是AngularJS中一个非常实用的指令，可以方便地动态修改
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25041
