angularJs中關於ng-class的三種使用方式說明

在開發中咱們一般會遇到一種需求：一個元素在不一樣的狀態須要展示不一樣的樣子。

而在這所謂的樣子固然就是改變其css的屬性，而實現能動態的改變其屬性值，必然只能是更換其class屬性

這裏有三種方法：

第一種：經過數據的雙向綁定（不推薦）

第二種：經過對象數組

第三種：經過key/value

下面簡單說下這三種：

第一種：經過數據的雙向綁定

實現方式：

function changeClass(){
  $scope.className = "change2";
}

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

網上各類不推薦，說實話，既然angularJS雙向數據綁定這麼吊，爲何不能經過這個來改變呢！查了下起因：「在controller涉及了classname在我看來是乎老是那麼詭異，我但願的是controller是一個乾淨的純javascript意義的object」，固然並無明文固定不可以這麼使用的，並且反而我以爲這樣很是的方便，讓html中元素想怎麼變就怎麼變！同理中的img元素中的src就不能夠經過別的來改變，可是經過這種方式就是能夠的！

固然，這種方式也的確給人的感受怪怪的，我的認爲：能夠不得已而爲之~

 

第二種：經過字符串數組的形式來改變

實現方式：

function changeClass(){
  $scope.className = true/false;
}
 
<div ng-class="{true:'zhende',false:'jiade'}[className]"></div>

實現很簡單，就是當className爲真的時候class爲zhende，相反則爲jiade。

可是有一點很差的只可以讓一個元素擁有兩種狀態，雖然這麼說！基本也是知足所需了，我通常都用這個。簡單、直觀！

第三種：經過key/value的方式

實現方式：

function changeClass(){
  $scope.lala = true;
}
 
<div ng-class="{'selectClass':select,'choiceClass':choice,'haha':lala}"></div>

當lala爲true的時候，class則爲haha，我的認爲這個是比較推薦的，能夠彌補第二種方式的點點遺憾~

 

因此基本上，angularJS中ng-class的實現就這三種方式~