在 AngularJS 中，我们可以使用 ng-class 指令来动态地添加或删除 DOM 元素的 class。这个指令可以让我们根据条件来决定一个元素是否应该添加一个 class，或者是否应该删除一个 class。这样，我们就可以根据应用的状态来动态地改变元素的样式。
ng-class 的用法
ng-class 指令可以接收一个对象或一个字符串作为参数。如果我们传递一个对象，ng-class 会根据对象中的键值对来决定哪些 class 应该被添加到元素中。如果我们传递一个字符串，ng-class 会将这个字符串作为一个表达式来处理，然后根据表达式的结果来决定是否添加或删除一个 class。
对象作为参数
当我们传递一个对象作为 ng-class 的参数时，这个对象中的键值对应该是 class 名称和一个布尔值。如果布尔值为真，那么这个 class 就会被添加到元素中；如果布尔值为假，那么这个 class 就会被从元素中删除。
下面是一个例子：
---- ----------- --------- --------- ----------- ---------- ------------
在这个例子中，我们定义了一个对象，它有两个键值对。如果 isActive 为真，那么 active 这个 class 就会被添加到 div 元素中；如果 isDisabled 为真，那么 disabled 这个 class 就会被添加到 div 元素中。
字符串作为参数
当我们传递一个字符串作为 ng-class 的参数时，这个字符串应该是一个表达式。这个表达式的结果应该是一个 class 名称，或者一个以空格分隔的多个 class 名称。
下面是一个例子：
---- -------------------------------
在这个例子中，我们定义了一个函数 getClass()，它返回一个字符串，这个字符串就是我们要添加到 div 元素中的 class 名称。在这个例子中，我们可以根据应用的状态来决定要添加哪个 class。
ng-class 的高级用法
ng-class 还支持一些高级用法，比如使用数组来添加多个 class，或者使用对象来添加多个 class。
数组作为参数
当我们传递一个数组作为 ng-class 的参数时，这个数组中的每个元素都应该是一个 class 名称或一个以空格分隔的多个 class 名称。
下面是一个例子：
---- ----------- --------- ------ - ---- ------------
在这个例子中，我们定义了一个数组，它有两个元素。第一个元素是 active，第二个元素是一个表达式，它将计算出一个类似于 btn-lg 或 btn-sm 的 class 名称。
对象作为参数的高级用法
当我们传递一个对象作为 ng-class 的参数时，这个对象中的值可以是一个函数，这个函数会被调用来计算出一个 class 名称。
下面是一个例子：
---- ----------- --------- --------- ------ --------- ------- ---- ---- -------- ------------
在这个例子中，我们定义了一个对象，它有三个键值对。第一个键值对中，值是一个布尔值，如果 isActive 为真，那么 active 这个 class 就会被添加到 div 元素中。第二个键值对中，值是一个布尔值，如果 isButton 为真，那么 btn 这个 class 就会被添加到 div 元素中。第三个键值对中，值是一个表达式，它将计算出一个类似于 btn-lg 或 btn-sm 的 class 名称，这个表达式中使用了插值表达式来动态地生成这个 class 名称。
示例代码
下面是一个完整的示例代码，它演示了如何使用 ng-class 来添加或删除 DOM 元素的 class：
--------- -----
----- ---------------
------
----- ----------------
--------------- ----------
-------
------- -
------ ----
-
--------- -
-------- ----
-
---- -
----------------- -----
------ ------
-------- -----
-------------- ----
-
------- -
---------- -----
-
------- -
---------- -----
-
--------
-------
----- -----------------------
---- ----------- --------- --------- ----------- ---------- ------- --- --------
---- ----------- --------- ------ - ---- -------- --- --------
---- ----------- --------- --------- ------ --------- ------- ---- ---- -------- -------- --- --------
------- ---------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
--------------- - -----
----------------- - ------
--------------- - -----
----------- - -----
---
---------
-------
-------在这个示例代码中，我们定义了一个 ng-app 模块和一个 ng-controller 控制器。在控制器中，我们定义了四个变量：isActive、isDisabled、isButton 和 size。这些变量用于控制三个 div 元素的 class。
第一个 div 元素通过一个对象来控制它的 class。这个对象中有两个键值对，分别对应了 active 和 disabled 这两个 class。我们可以通过改变 isActive 和 isDisabled 变量的值来控制这个 div 元素的 class。
第二个 div 元素通过一个数组来控制它的 class。这个数组中有两个元素，分别对应了 active 和 btn-lg 这两个 class。我们可以通过改变 size 变量的值来控制这个 div 元素的 class。
第三个 div 元素通过一个对象来控制它的 class。这个对象中有三个键值对，分别对应了 active、btn 和 btn-lg 或 btn-sm 这三个 class。我们可以通过改变 isActive、isButton 和 size 变量的值来控制这个 div 元素的 class。
总结
在 AngularJS 中，ng-class 是一个非常有用的指令，它可以让我们动态地添加或删除 DOM 元素的 class。我们可以使用对象、字符串、数组和函数来控制元素的 class，这样就可以根据应用的状态来动态地改变元素的样式。如果你正在学习 AngularJS，那么 ng-class 是一个必须掌握的指令。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f10c702b3ccec22f9dd4b7