AngularJS:ngClass用法小解

ngClass是 AngularJS 預(yù)設(shè)的一個(gè)指令，用于動(dòng)態(tài)自定義dom元素的css類。這里是官網(wǎng)給出的使用指南AngularJS:ngClass

ngClass在實(shí)際的應(yīng)用場(chǎng)景中還是比較靈活的，而在 AngularJS 中一般會(huì)有三種方式給元素的css class屬性做一些門道。

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

<div class="{{className}}"></div>

function ctrl($scope) {
    $scope.className = 'test-className';
}

說(shuō)明
這種方式完全沒(méi)有錯(cuò)，是AngularJS提供的一種改變class的方式，但是這種方式在controller中涉及了classname的賦值。在我看來(lái)似乎有點(diǎn)詭異。我希望的是controller是一個(gè)干凈的純凈的javascript意義上的object。

字符串?dāng)?shù)組形式

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

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

說(shuō)明
其結(jié)果可能會(huì)是2種情況，isActive表達(dá)式為true則會(huì)給<div></div>附加active樣式，否則會(huì)附加inactive樣式。

對(duì)象key/value處理

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

function ctrl($scope) {
    $scope.selected = true;
    $scope.isCar = false;
}

說(shuō)明
當(dāng)isSelect為真值時(shí)增加slected樣式，若isCar為真值，則再增加car樣式。

參考列表

• 細(xì)說(shuō)Angular ng-class