AngularJS之ng-class指令

ng-class是AngularJS预设的一个指令，用于动态自定义dom元素的css class name.

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

　　1：scope变量绑定。

        <button ng-class="{{blue}}">button1</button>

        $sc.blue = "blue";

        .blue{

             background-color: blue;

        }

　　2：字符串数组形式。

 

        <button ng-class="{true: 'red'}[isRed]">button2</button>

        $sc.isRed = true;

        .red{

             background-color: red;

        }

 

    3：对象key/value处理。

        <button ng-class="{'yellow': isYellow, 'color': color}">button3</button>

        $sc.isYellow = true;

        $sc.color = true;

        .yellow{

             background-color: yellow;

        }

        .color{

             color: #ccc;

        }

注意：如果元素中存在多个ng-class属性，只识别第一个ng-class，其余会忽略。

效果：

　　 http://runjs.cn/detail/aywqo0hg