AngularJS中ng-class使用方法

发布时间：2020-12-17 09:42:41 所属栏目：安全来源：网络整理

导读：有三种方法： 1、通过$scope绑定（不推荐） 2、通过对象数组绑定 3、通过key/value键值对绑定实现方法： 1、通过$scope绑定（不推荐）： [javascript] view plain copy function ctrl($scope){ $scope.className= "selected" ; } [html] copy div class = "

有三种方法：

1、通过$scope绑定（不推荐）

2、通过对象数组绑定

3、通过key/value键值对绑定

实现方法：

1、通过$scope绑定（不推荐）：

[javascript] 
   view plain 
   copy 
   
 functionctrl($scope){
 $scope.className="selected";
 }

[html] 
   copy

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

2、通过对象数组绑定：

copy 
    
$scope.isSelected=true;copy 
    
divng-class="{true:'selected',false:'unselected'}[isSelected]">

当isSelected为true时，增加selected样式；当isSelected为false时，增加unselected样式。

3、通过key/value键值对绑定：

copy 
    
 $scope.isA=$scope.isB=false; $scope.isC=false;
copy 
    
divng-class="{'A':isA,'B':isB,'C':isC}">

当isA为true时，增加A样式；当isB为true时，增加B样式；当isC为true时，增加C样式。

copy 
    
   
ion-list> ion-itemng-repeat="projectinprojects"ng-click="selectProject(project,$index)"ng-class="{active:activeProject==project}">
 {{project.title}}
ion-item>

根据projects循环创建ion-item，当activeProject为当前循环到的project时，增加active样式。

几点说明：

1、不推荐第一种方法，因为controller$scope应该只有数据和行为

2、ng-class是增加相关样式，可以和class同时使用

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!