AngularJS:ngClass用法小解

2018-06-07 18:21 更新

ngClassAngularJS 預(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';
}

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

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


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


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

說明
其結(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;
}

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

參考列表


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)