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

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

這里有三種方法：

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

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

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

下面簡(jiǎn)單說(shuō)下這三種：

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

實(shí)現(xiàn)方式：

function changeClass(){ $scope.className = "change2";}<div class="{{className}}"></div>

網(wǎng)上各種不推薦，說(shuō)實(shí)話，既然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ò)字符串?dāng)?shù)組的形式來(lái)改變

實(shí)現(xiàn)方式：

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

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

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

第三種：通過(guò)key/value的方式

實(shí)現(xiàn)方式：

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。