【轉】ng-class的用法

chenatu 發(fā)布于2019-08-01 17:18 / 2856人閱讀

摘要：但是有一點不好的只能夠讓一個元素擁有兩種狀態(tài)，雖然這么說基本也是滿足所需了，我一般都用這個。簡單直觀對于第二種方式我曾經(jīng)有疑惑這到底是什么用法這并非的用法，而是的技巧。

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

在開發(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";
}

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

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

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

實現(xiàn)方式：

function changeClass(){
$scope.className = true/false;
}

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

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

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

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

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

實現(xiàn)方式：

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

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

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

云服務器 GPU云服務器 ng-class詳解的用法 cdn的用法 find的用法

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51084.html

【轉】ng-class的用法

摘要：但是有一點不好的只能夠讓一個元素擁有兩種狀態(tài)，雖然這么說基本也是滿足所需了，我一般都用這個。簡單直觀對于第二種方式我曾經(jīng)有疑惑這到底是什么用法這并非的用法，而是的技巧。原文出處：https://segmentfault.com/a/11... 在開發(fā)中我們通常會遇到一種需求：一個元素在不同的狀態(tài)需要展現(xiàn)不同的樣子。而在這所謂的樣子當然就是改變其css的屬性，而實現(xiàn)能動態(tài)的改變其屬性...

Render 2019-08-20 18:25 評論0 收藏0
【轉】ng-class的用法

摘要：但是有一點不好的只能夠讓一個元素擁有兩種狀態(tài)，雖然這么說基本也是滿足所需了，我一般都用這個。簡單直觀對于第二種方式我曾經(jīng)有疑惑這到底是什么用法這并非的用法，而是的技巧。原文出處：https://segmentfault.com/a/11... 在開發(fā)中我們通常會遇到一種需求：一個元素在不同的狀態(tài)需要展現(xiàn)不同的樣子。而在這所謂的樣子當然就是改變其css的屬性，而實現(xiàn)能動態(tài)的改變其屬性...

beita 2019-08-29 13:02 評論0 收藏0
AngularJS中ng-class的用法

摘要：從今天開始寫博，記錄下自己技術發(fā)展的點滴吧。相比另外兩種，類型的表達式就有優(yōu)勢。缺點是多了，寫起來挺麻煩的第三種，表達式為這里中的每個元素都綁定了一個的輸入值，實際上每個元素都使用了類型的值中元素可以為或者，中對的規(guī)則同上。從今天開始寫博，記錄下自己技術發(fā)展的點滴吧。一、什么是ng-class ng-class是AngularJS預設的一個指令(directive)，通過這個指令能...

張金寶 2019-08-22 11:00 評論0 收藏0
AngularJS簡述

流行框架簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架，由谷歌團隊開發(fā)維護，能夠快速構建單頁web應用，化繁為簡無論是angularjs還是jQuery都是用原生JS封裝的庫：對代碼進行封裝，調(diào)用封裝的方法，簡化操作傳統(tǒng)方式是用get方式獲取元素，然后點方法 jQuery庫實現(xiàn)了對獲取方式的封裝，對方法的封裝框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會幫我們實現(xiàn)響應的功能...

Jason 2019-08-23 11:25 評論0 收藏0
angularjs初識

摘要：總的來說，收獲很大。這里這里就以一些常用的標簽談談中的基礎知識。然后還有一個表示記錄的索引號，從開始。已經(jīng)用這個數(shù)組的值替他們分好了組了，是不是感覺很強大，還有很多強大的地方等著我們?nèi)W習，掌握它，還有更強大的等著我們。周三的時候跟著老師簡單的入門了angularjs，然后去圖書館找了一本《Angularjs實戰(zhàn)》來看了看，雖然這本書網(wǎng)上的評價不太高，但對于初學者的我來說還是不錯的，...

tanglijun 2019-08-23 11:49 評論0 收藏0