angularJS中ng-class指令的三種實現方式

      

       引言

      在我們開發中經常會遇到這樣的需求，一個元素需要在不同的狀態下呈現不同的樣子，而在這所謂的的樣子當然

就是改變其css的屬性，而實現動態的改變屬性值，我們就需要實現動態的更換其class屬性值。在這給大家介紹三種

方法來實現。

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

<div ng-controller="firstController">
    <div ng-class="{{className}}"></div>

</div>
<script>
    var app=angular.module("myModule",[])
     app.controller('firstController',function($scope){
         $scope.className='change';

     })
</script>

      網上各種不推薦，說實話，既然angularJS雙向數據綁定這麼吊，爲什麼不能通過這個來改變呢！查了下原

由：“在controller涉及了classname在我看來是乎總是那麼詭異，我希望的是controller是一個乾淨的純javascript意義

的object”，當然並沒有明文固定不能夠這麼使用的，而且反而我覺得這樣非常的方便，讓html中元素想怎麼變就怎麼

變！同理中的img元素中的src就不可以通過別的來改變，但是通過這種方式就是可以的！當然，這種方式也的確給人

的感覺怪怪的，個人認爲：可以不得已而爲之~

      第二種：通過對象數組

<div ng-controller="firstController">

 <div ng-class="{true:'change1',false:'change2'}[className]"></div>


</div>
<script>
    var app=angular.module("myModule",[])
     app.controller('firstController',function($scope){
         $scope.className=true;

     })
</script>

       實現很簡單，就是當className爲true的時候class爲change1，相反則爲change2。

   但是有一點不好的只能夠讓一個元素擁有兩種狀態，雖然這麼說！基本也是滿足所需了，我一般都用這個。簡

單、直觀！

      第三種：通過key/value

<div ng-controller="firstController">


    <div ng-class="{'change1':select,'change2':choice,'change3':lala}">

</div>
<script>
    var app=angular.module("myModule",[])
     app.controller('firstController',function($scope){
         $scope.select=true;
         $scope.lala=true;

     })
</script>

      當lala爲true的時候，class則爲change3，個人認爲這個是比較推薦的，可以彌補第二種方式的點點遺憾~

      小結

     我們如果在項目中可以靈活的運用這些指令會給我們帶來非常多的便利，我們在解決問題的時候能有更多的思路，

這樣我們可以組合的使用這些指令來快速的解決一些比較苦惱的問題！！