AngularJS中關(guān)于ng-class指令的幾種實(shí)現(xiàn)方式詳解

更新時(shí)間：2016年09月17日 15:30:52 投稿：daisy

這篇文章給大家介紹了angularJS中ng-class指令的三種實(shí)現(xiàn)方式，其中包括通過(guò)數(shù)據(jù)的雙向綁定、通過(guò)對(duì)象數(shù)組和通過(guò)key/value這三種方式，有需要的朋友們可以參考學(xué)習(xí)，下面來(lái)一起看看吧。

前言

開(kāi)發(fā)中經(jīng)常會(huì)遇到這樣的需求，一個(gè)元素需要在不同的狀態(tài)下呈現(xiàn)不同的樣子，而在這所謂的的樣子當(dāng)然就是改變其css的屬性，而實(shí)現(xiàn)動(dòng)態(tài)的改變屬性值，我們就需要實(shí)現(xiàn)動(dòng)態(tài)的更換其class屬性值。

在這給大家介紹三種方法來(lái)實(shí)現(xiàn)，大家可以根據(jù)自己的需求來(lái)選擇方式，下面來(lái)看看。

第一種：通過(guò)數(shù)據(jù)的雙向綁定（不推薦）

<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>

網(wǎng)上各種不推薦，說(shuō)實(shí)話(huà)，既然angularJS雙向數(shù)據(jù)綁定這么吊，為什么不能通過(guò)這個(gè)來(lái)改變呢！查了下原由：“在controller涉及了classname在我看來(lái)是乎總是那么詭異，我希望的是controller是一個(gè)干凈的純javascript意義的object”，當(dāng)然并沒(méi)有明文固定不能夠這么使用的，而且反而我覺(jué)得這樣非常的方便，讓html中元素想怎么變就怎么變！同理中的img元素中的src就不可以通過(guò)別的來(lái)改變，但是通過(guò)這種方式就是可以的！當(dāng)然，這種方式也的確給人的感覺(jué)怪怪的，個(gè)人認(rèn)為：可以不得已而為之~

第二種：通過(guò)對(duì)象數(shù)組

<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>

實(shí)現(xiàn)很簡(jiǎn)單，就是當(dāng)className為true的時(shí)候class為change1，相反則為change2。

但是有一點(diǎn)不好的只能夠讓一個(gè)元素?fù)碛袃煞N狀態(tài)，雖然這么說(shuō)！基本也是滿(mǎn)足所需了，我一般都用這個(gè)。簡(jiǎn)單、直觀！

第三種：通過(guò)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>

當(dāng)lala為true的時(shí)候，class則為change3，個(gè)人認(rèn)為這個(gè)是比較推薦的，可以彌補(bǔ)第二種方式的點(diǎn)點(diǎn)遺憾~

總結(jié)

我們?nèi)绻陧?xiàng)目中可以靈活的運(yùn)用這些指令會(huì)給我們帶來(lái)非常多的便利，我們?cè)诮鉀Q問(wèn)題的時(shí)候能有更多的思路，這樣我們可以組合的使用這些指令來(lái)快速的解決一些比較苦惱的問(wèn)題！以上就是這篇文章的全部?jī)?nèi)容，希望能對(duì)大家想學(xué)習(xí)或者工作帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章: