首頁 > php教程 > PHP开发 > 淺談AngularJS中ng-class的使用方法

淺談AngularJS中ng-class的使用方法

高洛峰
發布: 2016-12-07 10:33:10
原創
1326 人瀏覽過

有三種方法:

1、透過$scope綁定(不建議)
2、透過物件陣列綁定
3、透過key/value鍵值對綁定

實作方法:

1、透過$scope綁定(不建議):

function ctrl($scope) { 
  $scope.className = "selected";
}
登入後複製

    

<div class="{{className}}"></div>
登入後複製

   

2、透過物件陣列綁定:

function ctrl($scope) { 
  $scope.isSelected = true;
}
登入後複製

r 時,增加selected樣式;當isSelected為false時,增加unselected樣式。

3、以key/value鍵值對綁定:

<div ng-class="{true:&#39;selected&#39;,false:&#39;unselected&#39;}[isSelected]"></div>
登入後複製

   

function ctrl($scope) { 
  $scope.isA = true;
  $scope.isB = false;
  $scope.isC = false;
}
登入後複製

   

當isA為true時,增加Ais;當isBtrue為true樣式增加C樣式。

<div ng-class="{&#39;A&#39;:isA,&#39;B&#39;:isB,&#39;C&#39;:isC}"></div>
登入後複製

   

根據projects循環創建ion-item,當activeProject為當前循環到的project時,增加active樣式。

幾點說明:

1、不推薦第一種方法,因為controller $scope應該只有數據和行為

2、ng-class是增加相關樣式,可以和class同時使用

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板