ng-class改變css樣式


而在這所謂的樣子當然就是改變其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,個人認為這個是比較推薦的,可以彌補第二種方式的點點遺憾~

 ng-class="{'choose':sendData.subspecs[key]===subspec.spec_id}"  后面為true就顯示該class

所以基本上,angularJS中ng-class的實現就這三種方式~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM