首页 > 网站 > WEB开发 > 正文

AngularJS之ng-class指令

2024-04-27 14:08:05
字体:
来源:转载
供稿:网友

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表