AngularJS的ngclass的用法

在angular中爲咱們提供了3種方案處理class：

1.scope變量綁定（不推薦使用）

controller代碼

javascriptfunction ctr($scope){
   $scope.test =「classname」;
}

html代碼

html<div class=」{{test}}」></div>

這種方法是沒錯的,可是它又angular提供變量來改變class的方法有點詭異至少我認爲controller應該是純淨的數據和行爲

2.字符串數組形式

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

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

isActive表達式爲true，則 active，不然inactive。

3.對象key/value處理
主要針對複雜的class混合

javascriptfunction Ctr($scope) { 
    $scope.isSelected = true;
    $scope.isCar = false;
}

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

當 isSelected = true 則增長selected class，
當isCar=true,則增長car class，
因此你結果多是4種組合。

我的推薦用2，3兩種方式，不建議將class放入controller scope之上，scope須要保持純潔，scope上的只能是數據和行爲。

文章原創連接 : http://www.devh.net/u/yidongnan/blog/how-to-user-ngclass-in-angularjs