淺談AngularJS中ng-class的使用方法
更新時間：2016年11月11日 10:08:16 投稿：jingxian
下面小編就為大家?guī)硪黄獪\談AngularJS中ng-class的使用方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
有三種方法：
1、通過$scope綁定（不推薦）
2、通過對象數(shù)組綁定
3、通過key/value鍵值對綁定
實現(xiàn)方法：
1、通過$scope綁定（不推薦）：
function ctrl($scope) {
$scope.className = "selected";
}
<div class="{{className}}"></div>
2、通過對象數(shù)組綁定：
function ctrl($scope) {
$scope.isSelected = true;
}
<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>
當(dāng)isSelected為true時，增加selected樣式；當(dāng)isSelected為false時，增加unselected樣式。
3、通過key/value鍵值對綁定：
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時，增加A樣式；當(dāng)isB為true時，增加B樣式；當(dāng)isC為true時，增加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時，增加active樣式。
幾點說明：
1、不推薦第一種方法，因為controller $scope應(yīng)該只有數(shù)據(jù)和行為
2、ng-class是增加相關(guān)樣式，可以和class同時使用
以上就是小編為大家?guī)淼臏\談AngularJS中ng-class的使用方法全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
AngularJS使用ng-Cloak阻止初始化閃爍問題的方法
這篇文章主要介紹了AngularJS使用ng-Cloak阻止初始化閃爍問題的方法,結(jié)合實例形式分析了AngularJS使用ng-Cloak來解決初始化時出現(xiàn)閃爍問題的相關(guān)技巧,需要的朋友可以參考下2016-11-11
本篇文章主要介紹了AngularJS中的路由使用及實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
跨域，前端開發(fā)中經(jīng)常遇到的問題，下面這篇文章主要給大家介紹了關(guān)于angular.js中解決跨域問題的三種方式，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要給大家介紹了關(guān)于Angular中使用MathJax遇到的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要介紹了三種AngularJS中獲取數(shù)據(jù)源的方式,需要的朋友可以參考下2016-02-02
本文主要介紹AngularJS簡單應(yīng)用程序,這里提供了詳細(xì)的流程和代碼程序，有需要的小伙伴可以參考下2016-08-08
本文給大家分享Angularjs cookie 操作實例詳解，demo案例分析，感興趣的朋友參考下吧2017-09-09
AngularJS Toaster是一個 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.這篇文章主要介紹了AngularJS Toaster使用詳解,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了Angularjs為ng-click事件傳遞參數(shù)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
本文主要介紹AngularJS 依賴注入的知識，這里整理了相關(guān)的基礎(chǔ)知識，并附示例代碼和實現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08