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. (转)Linux下查看Nginx Apache MySQL的并发连接数和连接状态

    转自: http://www.ha97.com/4106.html 1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态:netstat -n | awk '/^tcp/ { ...

  2. 洛谷 P2384 最短路

    洛谷 P2384 最短路 题目背景 狗哥做烂了最短路,突然机智的考了Bosh一道,没想到把Bosh考住了...你能帮Bosh解决吗? 他会给你10000000000000000000000000000 ...

  3. word2vec源代码解析之word2vec.c

    word2vec源代码解析之word2vec.c 近期研究了一下google的开源项目word2vector,http://code.google.com/p/word2vec/. 事实上这玩意算是神 ...

  4. 全球可信并且唯一免费的HTTPS(SSL)证书颁发机构:StartSSL

    全球可信并且唯一免费的HTTPS(SSL)证书颁发机构:StartSSL http://blog.s135.com/startssl/ 购买权威机构的证书一年大概得七八千元,其实这是不值得的,所以一直 ...

  5. drawerLayout-监听事件四个方法介绍

    1.首先我们看一下它的监听事件的生命周期 代码如下 mDrawerLayout.setDrawerListener(new DrawerListener() { @Override public vo ...

  6. Android学习笔记之网络接口(Http接口,Apache接口,Android接口)

    目前Android平台有三种网络接口可以使用,他们分别是:Java.NET.*(标准Java接口),org.apache(Apache接口),和android.Net.*(android网络接口). ...

  7. canvas画板基础应用的学习

    canvas是html5中的绘图容器,我们可以通过javascript的控制来进行图形的绘制,绘制对象可以是路径.盒.圆.字符等,同时,你也可以通过js给画布添加图像,下面来介绍canvas的各种基本 ...

  8. 【例题 7-7 UVA - 1354】Mobile Computing

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 秤砣都是在叶子节点. 可以把它看成一个二叉树. 则我们每次只需要选择任意两个"节点",让他们组成一棵二叉树就可以 ...

  9. [Ramda] Simple log function for debugging Compose function / Using R.tap for logging

    const log = function(x){ console.log(x); return x; } const get = R.curry(function(prop, obj){ return ...

  10. jquery的滚动事件

    $(selector).scroll(function);当滚动到合适的条件下,就触发某个函数. 现在基本就是前端利用AJAX对数据进行拼接操作,渲染进html的DOM结构中.