标签：
ng-class是AngularJS预设的一个指令，用于动态自定义dom元素的class属性（即类名）
ng-class在实际的应用场景中还是比较灵活的，而在AngularJS中一般有三种方式给元素的class属性做一些门道，如下：
<!doctype html> <html ng-app="ngClass"> <head> <meta charset="utf-8"> <title>ng-class</title> <style> .className{background-color:red;} </style> </head> <body> <div ng-controller="ngClassCnt"> <div class=‘{{text}}‘>Text</div> </div> <script src="js/angular-1.3.15/angular.js"></script> <script> var ngClass=angular.module("ngClass",[]); ngClass.controller(‘ngClassCnt‘,function($scope){ $scope.text=‘className‘; }); </script> </body> </html>
备注：这种方式完全没错，是angular提供的一种改变class的方式，但是在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object。
<!doctype html> <html ng-app="ngClass"> <head> <meta charset="utf-8"> <title>ng-class</title> <style> .error{background-color:red;} .warning{background-color:yellow;} </style> </head> <body> <div ng-controller="ngClassCnt"> <div ng-class=‘{error:isError,warning:isWarning}‘>{{messageText}}</div> <button ng-click=‘showError()‘>Error</button> <button ng-click=‘showWarning()‘>Warning</button> </div> <script src="js/angular-1.3.15/angular.js"></script> <script> var ngClass=angular.module("ngClass",[]); ngClass.controller(‘ngClassCnt‘,function($scope){ $scope.isError=false; $scope.isWarning=false; $scope.showError=function(){ $scope.messageText=‘This is an error‘; $scope.isError=true; $scope.isWarning=false; }; $scope.showWarning=function(){ $scope.messageText=‘Just a warning,Please carry on‘; $scope.isWarning=true; $scope.isError=false; }; }); </script> </body> </html>
备注(copy上面代码执行下更清楚)：
1、当点击Error按钮执行showError()方法时，isError为true，isWarning为false，此时带有ng-class的那个div的class属性的值会增加一个类名error
2、当点击Warning时执行showWarning()方法，isError为false，isWarning为true,此时带有ng-class的那个div的class属性的值会增加一个类名warning
3、若前面1、2两点执行的方法，得到的isError、isWarning均为true,此时带有ng-class的那个div的class属性的值会增加两个类名error 、warning
依此类推。。。
<!doctype html> <html ng-app="ngClass"> <head> <meta charset="utf-8"> <title>ng-class</title> <style> .active{background-color:red;} </style> </head> <body> <div ng-controller="ngClassCnt"> <div ng-class="{true: ‘active‘, false: ‘inactive‘}[isActive]">11</div> </div> <script src="js/angular-1.3.15/angular.js"></script> <script> var ngClass=angular.module("ngClass",[]); ngClass.controller(‘ngClassCnt‘,function($scope){ $scope.isActive = true; }); </script> </body> </html>
备注：其结果是2种组合，isActive表达式为true，则带有ng-class的那个div的类名为active，否则为inactive。
标签：
原文地址：http://www.cnblogs.com/wuqun/p/4524128.html
