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

AngularJS之ng-class指令的更多相关文章

  1. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  2. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...

  3. 带你走近AngularJS - 创建自己定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

  4. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  5. AngularJS:directive自定义的指令

    除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...

  6. AngularJS的表达式、指令的学习(2)

    最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...

  7. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  8. 走进AngularJs(八) ng的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  9. AngularJS开发之_指令

    指令是什么?    指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. 1.指令的匹配模式 index ...

  10. angularjs directive and component 指令与组件 ( 1.5.0 以后 )

    之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...

随机推荐

  1. WebService 的Description 属性说明(转)

    转自:http://exception.thinksaas.cn/0/173/173623.html 在WebMethod的description 中可使用超文本, 举例: 如上图中,红框类的WebS ...

  2. POJ 2253-Frogger (Prim)

    题目链接:Frogger 题意:两仅仅青蛙,A和B,A想到B哪里去,可是A得弹跳有限制,所以不能直接到B,可是有其它的石头作为过渡点,能够通过他们到达B,问A到B的全部路径中.它弹跳最大的跨度的最小值 ...

  3. 12.模板别名以及auto定义返回值

    #include <iostream> #include <array> using namespace std; //定义返回值类型 template<class T1 ...

  4. 微信消息体加解密及EncodingAESKey

    公众平台消息体签名及加解密方案概述 1.新增消息体签名验证,用于公众平台和公众账号验证消息体的正确性 2.针对推送给微信公众账号的普通消息和事件消息,以及推送给设备公众账号的设备消息进行加密 3.公众 ...

  5. ES6 数组、对象的扩展

    8. 数组的扩展 扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...

  6. Java对ad操作

    转载:http://blog.csdn.net/binyao02123202/article/details/18697953

  7. (转) 设置sqlplus中的退格键

    转自:http://blog.itpub.net/26110315/viewspace-717249/ 有些时候当你使用sqlplus登录到数据库中的时候,敲错了命令想要删除修改的时候,发现以前敲入的 ...

  8. 毕业两年做到测试经理的经历总结- 各个端的自动化,性能测试结合项目具体场景实战,分析客户反馈的Bug

    前言 最近看到行业的前辈都分享一些过往的经历来指导我们这些测试人员,我很尊敬我们的行业前辈,没有他们在前面铺路,如今我们这帮年轻的测试人估计还在碰壁或摸着石头过河,结合前辈们的经验,作为年轻的测试人也 ...

  9. 搭建MHA问题汇总

    1,Can't exec "mysqlbinlog": No such file or directory at /usr/share/perl5/vendor_perl/MHA/ ...

  10. HDU 1406 完数 因子的和

    http://acm.hdu.edu.cn/showproblem.php?pid=1406 完数的定义:如果一个大于1的正整数的所有因子之和等于它的本身,则称这个数是完数,比如6,28都是完数:6= ...