在 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 指令的基本用法和高级用法：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Angular ng-class 指令使用指南</title>
<style>
.active {
color: red;
}
.error {
background-color: yellow;
}
.even {
background-color: #eee;
}
.odd {
background-color: #ccc;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script>
angular.module('app', [])
.controller('MainController', function($scope) {
$scope.isActive = true;
$scope.hasError = false;
$scope.errorClass = 'error';
$scope.items = ['item1', 'item2', 'item3'];
$scope.getClass = function() {
return {
'active': $scope.isActive,
'error': $scope.hasError
};
};
});
</script>
</head>
<body ng-controller="MainController">
<div ng-class="{ 'active': isActive }">ng-class 示例</div>
<div ng-class="errorClass">ng-class 示例</div>
<div ng-class="{ 'active': isActive, 'error': hasError }">ng-class 示例</div>
<div ng-class="[errorClass, 'active']">ng-class 示例</div>
<div ng-class="getClass()">ng-class 示例</div>
<div ng-repeat="item in items"
ng-class-even="'even'"
ng-class-odd="'odd'">
{{ item }}
</div>
</body>
</html>总结
ng-class 指令是 Angular 中非常实用的一个指令，它能够让我们根据不同的条件动态地改变元素的样式，从而实现更加灵活和交互性的界面。在使用 ng-class 指令时，我们需要注意表达式的值的类型和用法，以便更加灵活地控制元素的样式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657409a9d2f5e1655dd43435