首页 > 其他 > 详细

angular学习笔记-关于ng-class的那些事儿

时间:2017-03-26 23:36:21      阅读:225      评论:0      收藏:0      [点我收藏+]

在angular中为我们提供了3种方案处理class:

第一种:通过数据的双向绑定(一般是不推荐的)

注意:当它的值为一个字符串时,它就会把用空格分开的字符串加到class中(不推荐,与常用class并无太大差别)

$scope.className = "change1";

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

//或者像这样

function changeClass(){
  $scope.className = "change2";
}

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

第二种:通过对象数组

function ctrl($scope) {  
  $scope.isClassA = true; 
}

<div ng-class="{true:‘ClassA‘,false:‘anotherClass‘}[isClassA]"></div>

//当isClassA为true时,增加ClassA样式;当isClassA为false时,增加anotherClass样式。

第三种:通过key/value(推荐使用)

function ctrl($scope) {  
  $scope.isClassA = true; 
  $scope.isClassB = false; 
  $scope.isClassC = false; 
}

<div ng-class="{‘ClassA‘:isClassA,‘ClassB‘:isClassB,‘ClassC‘:isClassC}"></div>

 //当isClassA为true时,增加ClassA样式;当isClassB为true时,增加ClassB样式;当isClassC为true时,增加ClassC样式。

 

angular学习笔记-关于ng-class的那些事儿

原文:http://www.cnblogs.com/hope-markup/p/6624679.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!