AngularJS之ng-class指令

时间:2023-03-09 21:50:37
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