AngularJS 的 ng-class 指令的使用详解-JavaScript中文网-JavaScript教程资源分享门户

在 Web 前端开发中，AngularJS 是一个非常流行的 JavaScript 框架，可以用来构建复杂的 Web 应用程序。其中，ng-class 指令是 AngularJS 提供的一种非常强大的指令，可以用于动态地添加或删除 HTML 元素的 class 属性，让你的应用程序变得更加灵活和可定制。

简介

ng-class 指令是 AngularJS 中的一种指令。可以用于动态地添加或删除 class 属性。下面是一些常见的用法：

示例 1：添加 class

<div ng-class="{ 'active': isActive }">This is a div.</div>

这个示例中，我们使用了一个对象作为 ng-class 的参数，属性名 active 是一个 css class 的名称，属性值 isActive 是一个 angular 表达式。如果 isActive 表达式的值为 true，那么 active 类将被添加到 div 元素中。

示例 2：删除 class

<div ng-class="{ 'no-active': isActive }" class="active">This is a div.</div>

这个示例中，我们设置了 class="active"，同时使用 ng-class 指令来提供一个表达式来删除它。如果 isActive 表达式为 true，class no-active 将被添加到 div，并且 class active 将被删除。

示例 3：添加多个 classes

<div ng-class="{ 'active': isActive, 'big-text': isBig }">This is a div.</div>

这个示例中，我们使用一个对象传递了两个属性，分别表示两个不同的 css class。如果 isActive 为 true，active css 类将被添加到 div 中。如果 isBig 为 true，big-text css 类将被添加到 div 中。

指令参数

ng-class 指令允许我们传递多个表达式，以添加、删除和切换 HTML 元素的 class 属性。

1. Object 参数

这是最常用的 ng-class 参数形式，它允许我们以对象的形式为 HTML 元素设置 class。

<div ng-class="{ 'active': isActive, 'big-text': isBig }">This is a div.</div>

在这个示例中，我们传递了一个对象，如果 isActive 为 true，class active css 类将被添加到 div 中，如果 isBig 为 true，class big-text 将被添加到 div 中。

2. Array 参数

array parameter 再次提高了指令的灵活性。它允许我们在一个数组中放置多个 CSS 类。在一些场景下，参数的类型为数组更容易使用。

<div ng-class="[isActive ? 'active' : 'no-active', isBig ? 'big-text' : '']">This is a div.</div>

在这种情况下，我们可以在数组中提供元素作为需要添加或删除的 css values。数组中的每个元素都是表达式，它需要计算出一个字符串，该字符串是 CSS 类的名称。

3. Expression 参数

expression 接受一个 JavaScript 表达式来设置 class 名称。我们可以使用 $scope 作为变量名并拓展其表达式以达到更复杂的条件。

<div ng-class="getCssClasses()">This is a div.</div>

在这个示例中，我们定义了一个函数 getCssClasses()，该函数计算 CSS 类的名称。ng-class 指令通过这个函数来设置 HTML 元素的类属性。

指令类型

NG-Class 提供了三种指令类型，它们在 HTML 元素上工作的方式略有不同。

1. ng-class

此指令将 CSS 名称添加到元素的 class 中，类名字符串可以使用表达式计算得出。它还接受一个对象，对象的键是 CSS 类名，对象的值是一个布尔值，该布尔值确定 CSS 类名是否应添加到元素中。

<div ng-class="{ 'active': isActive, 'big-text': isBig }">This is a div.</div>

2. ng-class-even

这个指令自动添加 .even CSS 类到偶数行的元素上，当使用 ng-repeat 时，如下所示：

<tr ng-repeat="item in items" ng-class-even="'even'">
  <td>{{ item.name }}</td>
  <td>{{ item.email }}</td>
  <td>{{ item.phone }}</td>
</tr>

这个示例中，我们将 ng-class-even 的参数设置为字符串 even。当循环遍历 items 的每个项时，input 的 class 将自动设置为 even 或不设置。

3. ng-class-odd

ng-class-odd 指令自动添加一个 .odd CSS 类到奇数行的元素上，与 ng-class-even 指令类似，如下所示：

<tr ng-repeat="item in items" ng-class-odd="'odd'">
  <td>{{ item.name }}</td>
  <td>{{ item.email }}</td>
  <td>{{ item.phone }}</td>
</tr>

本示例中，我们使用 ng-class-odd 参数设置字符串 odd，并将其传递给 tr 元素。

结论

ng-class 指令是一个强大的工具，可以使我们根据需要动态地添加或删除 HTML 元素的 class 属性。 ng-class 可以使用 CSS 类名称的表达式，还可以接受布尔值表达式，数组或函数。当需要从外部确定 HTML 元素的类名或条件时，ng-class 指令是一个很好的选择。

参考资料

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672976842e7021665e2490d8