欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解angularJs中關(guān)于ng-class的三種使用方式說明

 更新時間：2017年06月02日 10:13:15   作者：漸行漸遠_  
本篇文章主要介紹了angularJs中關(guān)于ng-class的三種使用方式說明，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在開發(fā)中我們通常會遇到一種需求：一個元素在不同的狀態(tài)需要展現(xiàn)不同的樣子。

而在這所謂的樣子當然就是改變其css的屬性，而實現(xiàn)能動態(tài)的改變其屬性值，必然只能是更換其class屬性

這里有三種方法：

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

第二種：通過對象數(shù)組

第三種：通過key/value( 推薦 )

下面簡單說下這三種：

第一種：通過數(shù)據(jù)的雙向綁定

實現(xiàn)方式：

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

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

網(wǎng)上各種不推薦，說實話，既然angularJS雙向數(shù)據(jù)綁定這么吊，為什么不能通過這個來改變呢！查了下原由：“在controller涉及了classname在我看來是乎總是那么詭異，我希望的是controller是一個干凈的純javascript意義的object”，當然并沒有明文固定不能夠這么使用的，而且反而我覺得這樣非常的方便，讓html中元素想怎么變就怎么變！同理中的img元素中的src就不可以通過別的來改變，但是通過這種方式就是可以的！

當然，這種方式也的確給人的感覺怪怪的，個人認為：可以不得已而為之~

第二種：通過字符串數(shù)組的形式來改變

實現(xiàn)方式：

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

實現(xiàn)很簡單，就是當className為真的時候class為zhende，相反則為jiade。

但是有一點不好的只能夠讓一個元素擁有兩種狀態(tài)，雖然這么說！基本也是滿足所需了，我一般都用這個。簡單、直觀！

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

實現(xiàn)方式：

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論