詳解angularJs中關(guān)于ng-class的三種使用方式說(shuō)明
在開發(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS中的API（接口）簡(jiǎn)單實(shí)現(xiàn)
本文主要介紹AngularJS API（接口）,這里對(duì)AngularJS API的知識(shí)做了詳細(xì)講解,并附簡(jiǎn)單代碼實(shí)例,有需要的小伙伴可以參考下2016-07-07
這篇文章主要介紹了jQuery和AngularJS的區(qū)別淺析,本文著重講解一個(gè)熟悉jQuery開的程序員如何應(yīng)對(duì)AngularJS中的一些編程思想的轉(zhuǎn)變,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了Angularjs中的依賴注入，AngularJS提供了一個(gè)至高無(wú)上的依賴注入機(jī)制，感興趣的小伙伴們可以參考一下2016-03-03
本篇文章主要介紹了Angular瀏覽器插件Batarang介紹及使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Angular事件之不同組件間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了Angular事件之不同組件間傳遞數(shù)據(jù)的方法，利用Angular Event在不同組件之間傳遞數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了AngularJS 單元測(cè)試（二）的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular2中如何使用ngx-translate進(jìn)行國(guó)際化
本篇文章主要介紹了Angular2中使用ngx-translate進(jìn)行國(guó)際化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Angular2-primeNG文件上傳模塊FileUpload使用詳解
這篇文章主要為大家詳細(xì)介紹了Angular2-primeNG文件上傳模塊FileUpload使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
微信小程序?qū)崿F(xiàn)左右聯(lián)動(dòng)的實(shí)戰(zhàn)記錄
聯(lián)動(dòng)菜單是大家在開發(fā)小程序經(jīng)常會(huì)遇到的一個(gè)功能，下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)左右聯(lián)動(dòng)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
Angular Router模塊提供了幾個(gè)重要的類來(lái)處理路由信息，這篇文章小編就來(lái)和大家分享一下這幾個(gè)類的使用吧，需要的小伙伴可以收藏一下2023-06-06