在前端开发中，我们常常需要动态地修改DOM元素的class属性。AngularJS提供了一个方便易用的指令ng-class，可以根据表达式的值动态地添加或删除class。
基本语法
ng-class指令可以接收一个对象、一个数组或一个表达式作为参数。当参数为对象时，ng-class会根据对象的键值对来判断是否添加或删除class。如果值为真，则添加对应的class；如果值为假，则删除对应的class。例如：
---- -------------------------------- --- ---- ----------- ------- -------- ---------
当参数为数组时，ng-class会将数组中的每个元素都当作class名字添加到元素上。例如：
---- ----------- --- ---- ----------- -------- --------- - --------- - -- ---------
当参数为表达式时，ng-class会根据表达式的值来判断是否添加或删除class。表达式可以是一个字符串、一个布尔值或一个返回class名字的函数。例如：
---- ---------------------- --- ---- ------------------ - -------- - ---------- ---- ------------------ --- ---- ----------------------------
高级用法
ng-class还支持一些高级用法，可以更加灵活地控制class的切换。
在嵌套元素上使用
当我们需要在嵌套的元素上添加class时，可以使用ng-class指令的子属性语法。例如：
---- --------------------------------- --- ---- ----------- ------- -------- --- ----- ----------- ------- -------- ---------- ------
使用函数返回对象
我们也可以让ng-class接收一个返回对象的函数作为参数。这个函数会在每次digest周期中被调用，可以根据当前scope状态动态计算class名字。例如：
---- ------------------------- --- ---- ----------------------------
--------------- - -------- -- -
------ -
---- ------------ --- ------
------ ------------ --- --------
----- ------------ --- ------
--
--使用$index变量
在ng-repeat指令中，我们可以使用$index变量来引用当前循环的索引值。例如：
---- --------------------- --- ---- --------------- -- ------ ----------- ---- ------ - - --- -- ----- ------ - - --- - ---------
示例代码
下面是一个简单的示例，演示了如何使用ng-class指令来切换class：
--------- -----
----- -------
------
----- ----------------
---------------- ------------------
-------
------- -
----------------- -------
-
--------
-------
----- ----------------- - -------
---- ----------- ------- -------- ------------------
------- ------------------ - ---------------------------
------- ------------------------------------------------------------------------
-------
-------在这个示例中，我们创建了一个DIV元素，并使用ng-class指令将active类绑定到它上面。我们还创建了一个按钮，点击后会切换isActive变量的值，从而切换class。
总结
ng-class是AngularJS中一个非常实用的指令，可以方便地动态修改
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25041