angularJs中ng-class的三种使用方式

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

第二种:通过对象数组

第三种:通过key/value

第一种:通过数据的双向绑定

实现方式:

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

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

不推荐

第二种:通过字符串数组的形式来改变

实现方式:

function changeClass(){
  $scope.className = true/false;
}
 
<div ng-class="{true:'zhende',false:'jiade'}[className]"></div>

实现很简单,就是当className为真的时候class为zhende,相反则为jiade。

但是有一点不好的只能够让一个元素拥有两种状态,虽然这么说!基本也是满足所需了,我一般都用这个。简单、直观!

第三种:通过key/value的方式

实现方式:

function changeClass(){
  $scope.lala = true;
}
 
<div ng-class="{'selectClass':select,'choiceClass':choice,'haha':lala}"></div>

当lala为true的时候,class则为haha,个人认为这个是比较推荐的,可以弥补第二种方式的点点遗憾~



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值