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. [ Eclipse ] [ Problem ] Eclipse 無法開啟問題

    因為 Eclipse 在設定環境的過程掛掉太多次,擷取一些網路上優秀的文章當作備份 http://www.ewdna.com/2013/12/Eclipse-Loading-Workbench.htm ...

  2. 判断移动端跳转,从移动端来的不跳转。利用localStorage保存状态,window.location.pathname跳转不同的url

    手机访问 www.yourdomain.com 跳转,从m.yourdomain.com来的不跳转. 访问www.yourdomain.com/category8, 跳转到m.yourdomain.c ...

  3. APK文件浅析-Android

    2011~2015,5年时间,断断续续学习了Android.  最近打算在2011年2个月认真学习的基础上,深入学习下.  由于有之前的Android基础,加上N年的Java等变成经验,自我感觉And ...

  4. 进阶攻略|最全的前端开源JS框架和库

    新的 Javascript 库层出不穷,从而Web 社区愈发活跃.多样.在多方面快速发展.详细去描述每一种主流的 Javascript框架和库近乎不可能,所以在这篇文章中主要介绍一些对前端发展最具影响 ...

  5. 【例题 8-10 UVA - 714】 Copying Books

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二分最后的最大值的最小值. 得到ans 然后从后往前尽量划分. 如果发现不够分成k个. 那么就从第一个开始接着分restk个(每隔1 ...

  6. Lamp(linux+apache+mysql+php)环境搭建

    Lamp(linux+apache+mysql+php)环境搭建 .安装apache2:sudo apt-get installapache2 安装完毕后.执行例如以下命令重新启动apache:sud ...

  7. 早该知道的 7 个JavaScript 技巧[转]

    简洁写法 对象的简写在过去,如果你想创建一个对象,你需要这样: var car = new Object();  car.colour = 'red';  car.wheels = 4;  car.h ...

  8. mysql数据库忘记密码时如何修改(转)

    当我们忘记mysql数据库密码时我们就无法正常进入数据库,也就无法修改密码,那么这时该怎么修改密码呢,这里教大家一个简单常用修改密码的方式. (如果图简单快速修改密码的话,直接跳过查询步骤,依照图上执 ...

  9. 15个常用的javaScript正则表达式--来自于javascript公众号

    摘要 收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. ...

  10. Redfield Water Ripples 2.02(水波滤镜中文绿色版-支持CC)

    Redfield Water Ripples 能够用于设计具有高度现实主义风格的水波纹特效,它提供了诸多属性选项,其 3D 渲染品质另人映像深刻.此滤镜很易用,其随机设定生成器可创建差点儿无限的水波纹 ...