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