码迷,mamicode.com
首页 > 其他好文 > 详细

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

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

标签:class   div   classname   通过   function   对象   change   code   key   

在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的那些事儿

标签:class   div   classname   通过   function   对象   change   code   key   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!