【轉(zhuǎn)】ng-class的用法

beita 發(fā)布于2019-08-29 13:02 / 1224人閱讀

摘要：但是有一點(diǎn)不好的只能夠讓一個(gè)元素?fù)碛袃煞N狀態(tài)，雖然這么說(shuō)基本也是滿足所需了，我一般都用這個(gè)。簡(jiǎn)單直觀對(duì)于第二種方式我曾經(jīng)有疑惑這到底是什么用法這并非的用法，而是的技巧。

原文出處：https://segmentfault.com/a/11...

在開(kāi)發(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";
}

網(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;
}

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

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

！！對(duì)于第二種方式我曾經(jīng)有疑惑：這到底是什么用法？https://segmentfault.com/q/10...

**這并非NG的用法，而是Javascript的技巧。
{true: "adopt", false: "reject"}[item.approve]
其中，你把{true: "adopt", false: "reject"}當(dāng)做某個(gè)變量a，你就可以改寫(xiě)成：
a[item.approve]
如果item.approve值為true，則上面為a[true]，也就是"adopt"
反之，則上面為a[false]，也就是"reject"。
當(dāng)然可以使用最常規(guī)的三目運(yùn)算符item.approve ? "adopt" : "reject"。**

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

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

function changeClass(){
$scope.lala = true;
}

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

所以基本上，angularJS中ng-class的實(shí)現(xiàn)就這三種方式~