溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

angularjs~ng-class

發(fā)布時(shí)間：2020-08-06 22:51:56 來源：網(wǎng)絡(luò) 閱讀：1397 作者：愛笑嘚蛋蛋 欄目：web開發(fā)

  1. 通過數(shù)據(jù)的雙向綁定（一般是不推薦的)

    1. $scope.className = "change1";

<div class="{{className}}"></div>

//或者像這樣

function changeClass(){
  $scope.className = "change2";
}

<div class="{{className}}"></div>

  2. 通過對象數(shù)組

    1. function ctrl($scope) {  
  $scope.isClassA = true; 
}

<div ng-class="{true:'ClassA',false:'anotherClass'}[isClassA]"></div>

//當(dāng)isClassA為true時(shí)，增加ClassA樣式；當(dāng)isClassA為false時(shí)，增加anotherClass樣式。

  3. 通過key/value（推薦使用）

    1. function ctrl($scope) {  
  $scope.isClassA = true; 
  $scope.isClassB = false; 
  $scope.isClassC = false; 
}

<div ng-class="{'ClassA':isClassA,'ClassB':isClassB,'ClassC':isClassC}"></div>

 //當(dāng)isClassA為true時(shí)，增加ClassA樣式；當(dāng)isClassB為true時(shí)，增加ClassB樣式；當(dāng)isClassC為true時(shí)，增加ClassC樣式。
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手