angularjs-ng-class指令

本文轉自：http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html
angularjs提供了3種方案處理class
1：scope變量綁定。（不推薦使用，本文不討論）
2：字符串數組形式。
3：對象key/value處理。

字符串數組形式：
字符串數組形式是針對class簡單變化，具有排斥性的變化，true是什麼class，false是什麼class，其形如;

function Ctr($scope) { 
    $scope.isActive = true;
}

<div ng-class="{true: 'active', false: 'inactive'}[isActive]">
</div>

其結果是2中組合，isActive表達式爲true，則 active，否則inactive。

對象key/value處理主要針對複雜的class混合，其形如：

function Ctr($scope) { 

}

<div ng-class {'selected': isSelected, 'car': isCar}">
</div> 

當 isSelected = true 則增加selected class，
當isCar=true,則增加car class，
所以你結果可能是4種組合。

順便說一下不使用第一種方案的理由：不建議將class放入controller scope之上，scope需要保持純潔行，scope上的只能是數據和行爲。

原文鏈接：http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html
作者：破 狼
出處：http://www.cnblogs.com/whitewolf/
本文版權歸作者，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。該文章也同時發佈在我的獨立博客中-個人獨立博客、博客園–破狼和51CTO–破狼。