在 Angular 中，ng-class 指令用于根据表达式的值动态地添加或删除一个或多个 CSS 类。它能够让我们根据不同的条件动态地改变元素的样式，从而实现更加灵活和交互性的界面。
基本用法
ng-class 指令的基本用法是通过一个表达式来判断是否添加某个 CSS 类。表达式的值可以是一个布尔值、一个字符串或一个对象。
布尔值
当表达式的值为 true 时，ng-class 指令会添加指定的 CSS 类。例如：
<div ng-class="{ 'active': isActive }">...</div>这个例子中，当 isActive 的值为 true 时，ng-class 指令会将 active 类添加到 div 元素中。
字符串
当表达式的值为非空字符串时，ng-class 指令会将这个字符串作为 CSS 类添加到元素中。例如：
<div ng-class="errorClass">...</div>
这个例子中，如果 errorClass 的值为 "error"，ng-class 指令会将 error 类添加到 div 元素中。
对象
当表达式的值为对象时，ng-class 指令会根据对象的属性来决定是否添加 CSS 类。例如：
<div ng-class="{ 'active': isActive, 'error': hasError }">...</div>这个例子中，当 isActive 的值为 true 时，ng-class 指令会将 active 类添加到 div 元素中；当 hasError 的值为 true 时，ng-class 指令会将 error 类添加到 div 元素中。
高级用法
除了基本用法之外，ng-class 指令还有一些高级用法，可以更加灵活地控制元素的样式。
数组
当表达式的值为数组时，ng-class 指令会将数组中的所有元素作为 CSS 类添加到元素中。例如：
<div ng-class="[activeClass, errorClass]">...</div>
这个例子中，如果 activeClass 的值为 "active"，errorClass 的值为 "error"，ng-class 指令会将 active 和 error 两个类都添加到 div 元素中。
函数
当表达式的值为函数时，ng-class 指令会调用这个函数，并根据函数的返回值来决定是否添加 CSS 类。例如：
<div ng-class="getClass()">...</div>
这个例子中，ng-class 指令会调用 getClass 函数，并根据函数的返回值来决定是否添加 CSS 类。
$scope.getClass = function() {
return {
'active': $scope.isActive,
'error': $scope.hasError
};
};这个例子中，getClass 函数返回一个对象，根据 isActive 和 hasError 的值来决定是否添加 active 和 error 两个类。
复杂表达式
当表达式比较复杂时，我们可以使用 ng-class-even 和 ng-class-odd 指令来为偶数和奇数行添加不同的 CSS 类。例如：
<div ng-repeat="item in items"
ng-class-even="'even'"
ng-class-odd="'odd'">
{{ item }}
</div>这个例子中，ng-class-even 和 ng-class-odd 指令会根据循环变量 $index 的值来决定是否添加 even 和 odd 两个类。
示例代码
下面是一个完整的示例代码，演示了 ng-class 指令的基本用法和高级用法：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-------------- -------- --------------
-------
------- -
------ ----
-
------ -
----------------- -------
-
----- -
----------------- -----
-
---- -
----------------- -----
-
--------
------- ---------------------------------------------------------------------------------
--------
--------------------- ---
----------------------------- ---------------- -
--------------- - -----
--------------- - ------
----------------- - --------
------------ - --------- -------- ---------
--------------- - ---------- -
------ -
--------- ----------------
-------- ---------------
--
--
---
---------
-------
----- -------------------------------
---- ----------- --------- -------- ----------- --------
---- ------------------------------ --------
---- ----------- --------- --------- -------- -------- ----------- --------
---- ---------------------- ------------------- --------
---- ------------------------------ --------
---- --------------- -- ------
----------------------
---------------------
-- ---- --
------
-------
-------总结
ng-class 指令是 Angular 中非常实用的一个指令，它能够让我们根据不同的条件动态地改变元素的样式，从而实现更加灵活和交互性的界面。在使用 ng-class 指令时，我们需要注意表达式的值的类型和用法，以便更加灵活地控制元素的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657409a9d2f5e1655dd43435