欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年11月11日 10:08:16   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇淺談AngularJS中ng-class的使用方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

有三種方法：

1、通過(guò)$scope綁定（不推薦）
2、通過(guò)對(duì)象數(shù)組綁定
3、通過(guò)key/value鍵值對(duì)綁定

實(shí)現(xiàn)方法：

1、通過(guò)$scope綁定（不推薦）：

function ctrl($scope) {  
  $scope.className = "selected"; 
} 
<div class="{{className}}"></div>

2、通過(guò)對(duì)象數(shù)組綁定：

function ctrl($scope) {  
  $scope.isSelected = true; 
} 
<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>

當(dāng)isSelected為true時(shí)，增加selected樣式；當(dāng)isSelected為false時(shí)，增加unselected樣式。

3、通過(guò)key/value鍵值對(duì)綁定：

function ctrl($scope) {  
  $scope.isA = true; 
  $scope.isB = false; 
  $scope.isC = false; 
} 
<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>

當(dāng)isA為true時(shí)，增加A樣式；當(dāng)isB為true時(shí)，增加B樣式；當(dāng)isC為true時(shí)，增加C樣式。

<ion-list> 
  <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}"> 
    {{project.title}} 
  </ion-item> 
</ion-list>

根據(jù)projects循環(huán)創(chuàng)建ion-item，當(dāng)activeProject為當(dāng)前循環(huán)到的project時(shí)，增加active樣式。

幾點(diǎn)說(shuō)明：

1、不推薦第一種方法，因?yàn)閏ontroller $scope應(yīng)該只有數(shù)據(jù)和行為

2、ng-class是增加相關(guān)樣式，可以和class同時(shí)使用

以上就是小編為大家?guī)?lái)的淺談AngularJS中ng-class的使用方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~

相關(guān)文章

  • AngularJS使用ng-Cloak阻止初始化閃爍問(wèn)題的方法

    AngularJS使用ng-Cloak阻止初始化閃爍問(wèn)題的方法

    這篇文章主要介紹了AngularJS使用ng-Cloak阻止初始化閃爍問(wèn)題的方法,結(jié)合實(shí)例形式分析了AngularJS使用ng-Cloak來(lái)解決初始化時(shí)出現(xiàn)閃爍問(wèn)題的相關(guān)技巧,需要的朋友可以參考下
    2016-11-11
  • AngularJS中的路由使用及實(shí)現(xiàn)代碼

    AngularJS中的路由使用及實(shí)現(xiàn)代碼

    本篇文章主要介紹了AngularJS中的路由使用及實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-10-10
  • angular.js中解決跨域問(wèn)題的三種方式

    angular.js中解決跨域問(wèn)題的三種方式

    跨域，前端開(kāi)發(fā)中經(jīng)常遇到的問(wèn)題，下面這篇文章主要給大家介紹了關(guān)于angular.js中解決跨域問(wèn)題的三種方式，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
    2017-07-07
  • Angular中使用MathJax遇到的一些問(wèn)題

    Angular中使用MathJax遇到的一些問(wèn)題

    這篇文章主要給大家介紹了關(guān)于Angular中使用MathJax遇到的一些問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-12-12
  • 三種AngularJS中獲取數(shù)據(jù)源的方式

    三種AngularJS中獲取數(shù)據(jù)源的方式

    這篇文章主要介紹了三種AngularJS中獲取數(shù)據(jù)源的方式,需要的朋友可以參考下
    2016-02-02
  • AngularJS教程之簡(jiǎn)單應(yīng)用程序示例

    AngularJS教程之簡(jiǎn)單應(yīng)用程序示例

    本文主要介紹AngularJS簡(jiǎn)單應(yīng)用程序,這里提供了詳細(xì)的流程和代碼程序，有需要的小伙伴可以參考下
    2016-08-08
  • Angularjs cookie 操作實(shí)例詳解

    Angularjs cookie 操作實(shí)例詳解

    本文給大家分享Angularjs cookie 操作實(shí)例詳解，demo案例分析，感興趣的朋友參考下吧
    2017-09-09
  • AngularJS Toaster使用詳解

    AngularJS Toaster使用詳解

    AngularJS Toaster是一個(gè) AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.這篇文章主要介紹了AngularJS Toaster使用詳解,需要的朋友可以參考下
    2017-02-02
  • Angularjs為ng-click事件傳遞參數(shù)

    Angularjs為ng-click事件傳遞參數(shù)

    這篇文章主要介紹了Angularjs為ng-click事件傳遞參數(shù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2017-06-06
  • AngularJS 依賴(lài)注入詳解及示例代碼

    AngularJS 依賴(lài)注入詳解及示例代碼

    本文主要介紹AngularJS 依賴(lài)注入的知識(shí)，這里整理了相關(guān)的基礎(chǔ)知識(shí)，并附示例代碼和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下
    2016-08-08

最新評(píng)論