ng-class是AngularJS預設的一個指令,用于動態自定義dom元素的css class name,下面是其官網的api doc, AngularJS:ngClass
ng-class在實際的應用場景中還是比較靈活的,而在AngularJS中一般有三種方式給元素的class屬性做一些門道,如下
**對象key/value處理**
~~~
<!-- lang: js -->
function Ctr($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}"></div>
~~~
說明
當 isSelected = true 則增加selected class,當isCar=true,則增加car class。以此類推。
**字符串數組形式**
~~~
!-- lang: js -->
function Ctr($scope) {
$scope.isActive = true;
}
<div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>
~~~
說明
其結果是2中組合,isActive表達式為true,則 active,負責inactive。
**scope變量綁定(不推薦使用)**
~~~
<!-- lang: js -->
function ctr($scope){
$scope.test =“classname”;
}
<div class=”{{test}}”></div>
~~~
說明
這種方式完全沒錯,是angular提供的一種改變class的方式,但是在controller涉及了classname在我看來是乎總是那么詭異,我希望的是controller是一個干凈的純javascript意義的object。