每天学习一点点,成功增加一大步

AngularJS 中 ng-class 使用方法

AngularJS zhanghui 573℃

有三种方法:
1、通过$scope绑定(不推荐)
2、通过对象数组绑定
3、通过key/value键值对绑定

实现方法:
1、通过$scope绑定

 function ctrl($scope) {   
    $scope.className = "selected";  
}  

<div class="{{className}}"></div>  
<!-- 或者 -->
<div ng-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;  
}  


<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>

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

转载请注明:隨習筆記 » AngularJS 中 ng-class 使用方法