ngClass指令允许您通过绑定一个表示要添加的所有类的表达式来动态地在HTML元素上设置CSS类。
该指令有三种不同的方式，这取决于表达式求值的三种类型:
如果表达式计算为字符串，那么字符串应该是一个或多个空格分隔的类名。
如果表达式对一个对象进行计算，那么对于具有truthy值的对象的每个键值对，对应的键就被用作类名。
如果表达式计算为一个数组，那么数组中的每个元素都应该是类型1中的字符串，或者是类型2中的对象。这意味着您可以将字符串和对象组合在一个数组中，从而使您能够更好地控制CSS类的出现。请参阅下面的代码以获得一个示例。
当表达式发生变化时，先前添加的类被删除，并且只有在新的类被添加时才会被删除。
例子：
index.html
<!DOCTYPE html> <html ng-app="bindExample"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .strike { text-decoration: line-through; } .bold { font-weight: bold; } .red { color: red; } .has-error { color: red; background-color: yellow; } .orange { color: orange; } </style> </head> <body ng-controller="ExampleController"> <div> <p ng-class="{'strike': deleted, 'bold': important, 'has-error': error}">Map Syntax Example</p> <label> <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class) </label><br> <label> <input type="checkbox" ng-model="important"> important (apply "bold" class) </label><br> <label> <input type="checkbox" ng-model="error"> error (apply "has-error" class) </label> </div><hr> <div> <p ng-class="style">Using String Syntax</p> <input type="text" ng-model="style" placeholder="Type: bold strike red" aria-label="Type: bold strike red"> </div><hr> <div> <p ng-class="[style1, style2, style3]">Using Array Syntax</p> <input ng-model="style1" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"><br> <input ng-model="style2" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"><br> <input ng-model="style3" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"><br> </div><hr> <div> <p ng-class="[style4, {'orange': warning}]">Using Array and Map Syntax</p> <input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike"><br> <label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label> </div><hr> <script src="framework/angular.js"></script> <script src="js/bbb.js"></script> </body> </html>
script.js
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.deleted = false;
$scope.important = false;
$scope.error = false;
$scope.style = "";
$scope.style1 = "";
$scope.style2 = "";
$scope.style3 = "";
$scope.style4 = "";
$scope.warning = false;
}]);
例2
<!DOCTYPE html> <html ng-app="bindExample"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .base-class { transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; } .base-class.my-class { color: red; font-size:3em; } </style> </head> <body ng-controller="ExampleController"> <div> <input id="setbtn" type="button" value="set" ng-click="myVar='my-class'"> <input id="clearbtn" type="button" value="clear" ng-click="myVar=''"> <br> <span class="base-class" ng-class="myVar">Sample Text</span> </div><hr> <script src="framework/angular.js"></script> <script src="js/bbb.js"></script> </body> </html>