三种方法:
1. 通过$scope 绑定(不推荐);
function ctrl($scope){
$scope.className = "selected";
}

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


2. 通过对象数组绑定;
function ctrl($scope){
$scope.isSelected = true;
}
<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>

// 当 isSelected为true时,增加selected样式,当isSelected为false时,增加unselected样式;


3. 通过 key/value 键值对绑定
function ctrl($scope){
$scope.isA = true;
$scope.isB = false;
$scope.isC = false;
}

//当 isA为true时,增加 A 样式;当isB 为 true时,增加 B 样式;当isC 为 true时,增加 C 样式;

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

//根据 projects 创建 ico-item, 当activeProject为当前循环到的project 时,增加active样式;



说明:
1. 不推荐 第一种方法,因为controller,$scope 应该只有数据和行为;
2. ng-class是增加相关样式,可以和class同时使用;
posted on 2018-02-08 17:33  niunf  阅读(107)  评论(0编辑  收藏  举报