在 Web 前端开发中，AngularJS 是一个非常流行的 JavaScript 框架，可以用来构建复杂的 Web 应用程序。其中，ng-class 指令是 AngularJS 提供的一种非常强大的指令，可以用于动态地添加或删除 HTML 元素的 class 属性，让你的应用程序变得更加灵活和可定制。
简介
ng-class 指令是 AngularJS 中的一种指令。可以用于动态地添加或删除 class 属性。下面是一些常见的用法：
示例 1：添加 class
---- ----------- --------- -------- ------- -- - ----------
这个示例中，我们使用了一个对象作为 ng-class 的参数，属性名 active 是一个 css class 的名称，属性值 isActive 是一个 angular 表达式。如果 isActive 表达式的值为 true，那么 active 类将被添加到 div 元素中。
示例 2：删除 class
---- ----------- ------------ -------- -- ------------------- -- - ----------
这个示例中，我们设置了 class="active"，同时使用 ng-class 指令来提供一个表达式来删除它。如果 isActive 表达式为 true，class no-active 将被添加到 div，并且 class active 将被删除。
示例 3：添加多个 classes
---- ----------- --------- --------- ----------- ----- ------- -- - ----------
这个示例中，我们使用一个对象传递了两个属性，分别表示两个不同的 css class。如果 isActive 为 true，active css 类将被添加到 div 中。如果 isBig 为 true，big-text css 类将被添加到 div 中。
指令参数
ng-class 指令允许我们传递多个表达式，以添加、删除和切换 HTML 元素的 class 属性。
1. Object 参数
这是最常用的 ng-class 参数形式，它允许我们以对象的形式为 HTML 元素设置 class。
---- ----------- --------- --------- ----------- ----- ------- -- - ----------
在这个示例中，我们传递了一个对象，如果 isActive 为 true，class active css 类将被添加到 div 中，如果 isBig 为 true，class big-text 将被添加到 div 中。
2. Array 参数
array parameter 再次提高了指令的灵活性。它允许我们在一个数组中放置多个 CSS 类。在一些场景下，参数的类型为数组更容易使用。
---- ------------------- - -------- - ------------ ----- - ---------- - --------- -- - ----------
在这种情况下，我们可以在数组中提供元素作为需要添加或删除的 css values。数组中的每个元素都是表达式，它需要计算出一个字符串，该字符串是 CSS 类的名称。
3. Expression 参数
expression 接受一个 JavaScript 表达式来设置 class 名称。我们可以使用 $scope 作为变量名并拓展其表达式以达到更复杂的条件。
---- ------------------------------- -- - ----------
在这个示例中，我们定义了一个函数 getCssClasses()，该函数计算 CSS 类的名称。ng-class 指令通过这个函数来设置 HTML 元素的类属性。
指令类型
NG-Class 提供了三种指令类型，它们在 HTML 元素上工作的方式略有不同。
1. ng-class
此指令将 CSS 名称添加到元素的 class 中，类名字符串可以使用表达式计算得出。它还接受一个对象，对象的键是 CSS 类名，对象的值是一个布尔值，该布尔值确定 CSS 类名是否应添加到元素中。
---- ----------- --------- --------- ----------- ----- ------- -- - ----------
2. ng-class-even
这个指令自动添加 .even CSS 类到偶数行的元素上，当使用 ng-repeat 时，如下所示：
--- --------------- -- ------ ----------------------- ------ --------- ------- ------ ---------- ------- ------ ---------- ------- -----
这个示例中，我们将 ng-class-even 的参数设置为字符串 even。当循环遍历 items 的每个项时，input 的 class 将自动设置为 even 或不设置。
3. ng-class-odd
ng-class-odd 指令自动添加一个 .odd CSS 类到奇数行的元素上，与 ng-class-even 指令类似，如下所示：
--- --------------- -- ------ --------------------- ------ --------- ------- ------ ---------- ------- ------ ---------- ------- -----
本示例中，我们使用 ng-class-odd 参数设置字符串 odd，并将其传递给 tr 元素。
结论
ng-class 指令是一个强大的工具，可以使我们根据需要动态地添加或删除 HTML 元素的 class 属性。 ng-class 可以使用 CSS 类名称的表达式，还可以接受布尔值表达式，数组或函数。当需要从外部确定 HTML 元素的类名或条件时，ng-class 指令是一个很好的选择。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672976842e7021665e2490d8