关于AngularJS的ng-class

当通过点击改变标签元素的样式时,ng-class就派上了用场。我用的时候,是因为需要在一个A元素数组中查找被选中的A元素数组中的元素,不知道你们明白吗,就是在一个大数组里面查找小数组中的元素,如果存在样式就改变。刚开始的时候特别头疼,后来看到了ng-class,就变得简单起来。
简单来说ng-class可以根据数据的变化进行双向绑定。
比如:当我们这样简单绑定的时候:
<div ng-class="{{page1.active}}"></div
当我们在controller里面操作page1.active的时候,ng-class的值就会变成page1.active的值,用来操作active的值。

Page.prototype.changeActive = function(){
    if(this.change){
        this.active = 'active';
    }else{
        this.active = 'inactive';
    }
};

当然,我们也可以这样子写,在先确定值的情况下确定class:

<div ng-class="{true:'active',false:'inactive'}[page1.isActive]"></div>
Page.prototype.change = function(){
    this.isActive = ture;
};

还有另一种的写法,在确定class的情况下,确定是否显示这个class:

<div ng-class="{'active':page.changeActive();}"></div>
Page.prototype.changeActive = function(){
    return active != '';
};

我用的最多的还是第三种写法。

在此非常感谢:
http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值