ng-class用法
在angular中为我们提供了3种方案处理class:
1:scope变量绑定。这种方案不推荐,因为scope里最好处理业务逻辑,不去管渲染的事。
2:字符串数组形式。
3:对象key/value处理。
我们继续其他两种解决方案:
1字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如;

function testCtrl($scope) {
    $scope.isError = true;
}
<div ng-class="{true: 'error', false: 'info'}[isError]">
</div>

其结果是2中组合,isError表达式为true,则 error,否则事info。
2对象key/value处理主要针对复杂的class混合,其形如:

function testCtrl($scope) { 
}
<div ng-class={'selected': isSelected, 'car': isCar}">
</div> 

当 isSelected = true 则增加selected class,
当isCar=true,则增加car class,
所以你结果可能是4种组合。
比较推荐用2,3两种方式,不建议将class放入controller scope之上,scope需要保持纯洁行,scope上的只能是数据和行为。
ng-class用法的更多相关文章
- 【转】ng-class的用法
		
原文出处:https://segmentfault.com/a/11... 在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现 ...
 - ng2048源码阅读
		
ng2048源码阅读 Tutorial: http://www.ng-newsletter.com/posts/building-2048-in-angularjs.html Github: http ...
 - ng 1.2 ng-bind-html 用法
		
使用ng-bind-html渲染html字符串时需要在控制器外注册$sec 过滤器 //过滤器渲染html字符串 app.filter('to_trusted',['$sce',function($s ...
 - 萌新笔记——vim命令“=”、“d”、“y”的用法(结合光标移动命令,一些场合会非常方便)
		
vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...
 - 走进AngularJs(二) ng模板中常用指令的使用方式
		
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
 - ng指令之 ng-class 篇
		
1>定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类.ng-class 指令的值可以是字符串,对象,或一个数组. 如果是字符串,多个类名使用空格分隔. 如果 ...
 - [Ng]Angular应用点概览
		
1. 使用模块化写法. var app = angular.module('myApp', []); app.controller('TextController', function($scop ...
 - (转载)OC学习篇之---协议的概念和用法
		
在前一篇文章中我们介绍了OC中类的延展,这一篇文章我们在来看一下OC中协议的概念以及用法,协议也是OC中的一个重点,Foundation框架以及我们后面在写代码都会用到. OC中的协议就是相当于Jav ...
 - sed命令用法详解
		
sed命令用法 sed是一种流编辑器,它是文本处理中非常有用的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为『模式空间』(pattern space) ...
 - AngularJS简单用法
		
一.数据绑定 AngularJS的双向数据绑定,意味着你可以在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然.即:一方面可以做到model变化驱动了DOM中元素变化,另一 ...
 
随机推荐
- overflow清楚浮动 + 去掉li标签的小圆点
			
原文链接:http://blog.163.com/qqabc20082006@126/blog/static/22928525201031211212955/ 测试用例: <!DOCTYPE h ...
 - UML学习-状态图
			
1.状态图概述 状态图(Statechart Diagram)主要用于描述一个对象在其生存期间的动态行为,表现为一个对象所经历的状态序列,引起状态转移的事件(Event),以及因状态转移而伴随的动作( ...
 - PHP学习笔记三十六【try 二】
			
<?php //定义一个顶级异常处理器 要定义在最上面 function my_exception($e) { echo "我是顶级异常处理:".$e->getMess ...
 - WCF入门教程系列二
			
一.概述 WCF能够建立一个跨平台的安全.可信赖.事务性的解决方案,是一个WebService,.Net Remoting,Enterprise Service,WSE,MSMQ的并集,有一副很经典的 ...
 - C++中的条件传送代码
			
条件传送代码-这种代码先计算一个条件操作的两种结果,然后再条件从而选其中一个-条件传送代码匹配了现代处理器的性能特征(因为现代处理器是流水线) void minmax2(int a[],int b[] ...
 - (转) Dynamic memory
			
In the programs seen in previous chapters, all memory needs were determined before program executi ...
 - [ofbiz]less-than (<) and greater-than (>) symbols
			
问题描述: In field [updateItemStr] less-than (<) and greater-than (>) symbols are not allowed 此处的f ...
 - TextView之一:子类的常用属性
			
TextView常见的子类包括EditText,Button,CheckBox, RadioButton等. 1.EditText EditText继承自TextView,因此TextView所有属性 ...
 - python笔记之调用系统命令
			
python笔记之调用系统命令 目前我使用到的python中执行cmd的方式有三种 使用os.system("cmd") 该方法在调用完shell脚本后,返回一个16位的二进制数, ...
 - Centos下搭建 nginx+uwsgi+python
			
python做web应用最麻烦的还是配置服务器了,此话不假,光中间件就有好几种选择,fastcgi.wsgi.uwsgi,难 免让人眼花缭乱. 而听说uwsgi的效率是fastcgi和wsgi的10倍 ...