关于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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章