ng-class是AngularJS預設的一個指令，用於動態自定義dom元素的class屬性（即類名）
ng-class在實際的應用場景中還是比較靈活的，而在AngularJS中一般有三種方式給元素的class屬性做一些門道，如下：
scope變量綁定（不推薦使用）：
<!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。
對象key/value處理
<!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。