首页 > Web开发 > 详细

AngularJS之ng-class指令

时间:2015-06-17 19:42:46      阅读:186      评论:0      收藏:0      [点我收藏+]

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;
        }

 

效果:
  http://runjs.cn/detail/aywqo0hg

 

AngularJS之ng-class指令

原文:http://www.cnblogs.com/zhx1991/p/4584078.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!