ng-class的使用几种方式

(1):利用双向数据绑定(className根据chang2的值去匹配类)

<div class="{{className}}">............</div>

$scope.className="change2";

(2):通过字符串数组的形式

<div ng-class="{true:'RED',false:'GREEN'}[className]"></div>

$scope.className=true/false;

当className=true的时候,ng-class=RED,  or GREEN

(3):通过键值对的形式

<div ng-class="{'A':select1,'B':select2,'C':select3}"></div>

$scope.select3=true;此时的ng-class=C;

关于ng-class的用法的更多相关文章

  1. ng 1.2 ng-bind-html 用法

    使用ng-bind-html渲染html字符串时需要在控制器外注册$sec 过滤器 //过滤器渲染html字符串 app.filter('to_trusted',['$sce',function($s ...

  2. 萌新笔记——vim命令“=”、“d”、“y”的用法(结合光标移动命令,一些场合会非常方便)

    vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...

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

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

  4. ng指令之 ng-class 篇

    1>定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类.ng-class 指令的值可以是字符串,对象,或一个数组. 如果是字符串,多个类名使用空格分隔. 如果 ...

  5. [Ng]Angular应用点概览

      1. 使用模块化写法. var app = angular.module('myApp', []); app.controller('TextController', function($scop ...

  6. (转载)OC学习篇之---协议的概念和用法

    在前一篇文章中我们介绍了OC中类的延展,这一篇文章我们在来看一下OC中协议的概念以及用法,协议也是OC中的一个重点,Foundation框架以及我们后面在写代码都会用到. OC中的协议就是相当于Jav ...

  7. sed命令用法详解

    sed命令用法 sed是一种流编辑器,它是文本处理中非常有用的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为『模式空间』(pattern space) ...

  8. AngularJS简单用法

    一.数据绑定 AngularJS的双向数据绑定,意味着你可以在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然.即:一方面可以做到model变化驱动了DOM中元素变化,另一 ...

  9. Android 自学之画廊视图(Gallery)功能和用法

    Gallery与之前讲的Spinner有共同的父类:AbsSpinner,表明Gallery和Spinner都是一个列表框.他们之间的区别在于Spinner显示的是一个垂直的列表框,而Gallery显 ...

  10. 观察者模式在ng(Angular)中的应用

    在这个前端框架满天飞的天下,angular MVVM 的模式确实火了一把,所以最近一直在学习ng,感悟颇多,填坑无数,今天终静下心来打算更新自己久未变动的博客,做一做总结. 1.在ng中的观察者模式: ...

随机推荐

  1. ASP.NET连接数据库配置文件

    // Web.Config <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配置 ASP.NE ...

  2. JavaScript中国象棋程序(7) - 置换表

    "JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第2节. 这一系列共有9个部分: 0.JavaScript中国象 ...

  3. STAR法则

    现在相信大部分跳槽的朋友都已经将工作辞了,正在找工作的这个漩涡中,还没辞掉的可能也快了,找工作的这段时间是一个非常考验你的扛打击能力的时候.像网上投了几十家简历,只有几家邀请面试的,其他都是连面试阶段 ...

  4. android学习2——RelativeLayout

    相对布局管理器,一个View的位置是相对于另外一个View定义的. <?xml version="1.0" encoding="utf-8"?> & ...

  5. Angular.js之指令学习笔记

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  6. (三目运算符)PHP中问号?和冒号: 的作用

    <表达式1>?<表达式2>:<表达式3>; "?"运算符的含义是: 先求表达式1的值, 如果为真, 则执行表达式2,并返回表达式2的结果 ; 如 ...

  7. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. android开发艺术探索读书笔记之-------view的事件分发机制

    View的点击事件的分发,其实就是对MotionEvent事件的分发过程,即当一个MotionEvent产生后,系统需要把这个事件传递给一个具体的View,而这个过程就是分发过程. 分发过程主要由以下 ...

  9. [读书系列] 深度探索C++对象模型 初读

    2012年底-2014年初这段时间主要用C++做手游开发,时隔3年,重新拿起<深度探索C++对象模型>这本书,感觉生疏了很多,如果按前阵子的生疏度来说,现在不借助Visual Studio ...

  10. 【转】Django HTTP请求的处理流程

    Django 和其他 Web 框架的 HTTP 处理的流程大致相同,Django 处理一个 Request 的过程是首先通过中间件,然后再通过默认的 URL 方式进行的.我们可以在 Middlewar ...