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中元素变化,另一 ...
随机推荐
- 大到可以小说的Y组合子(零)
问:啊!我想要一个匿名的递归… 答:Y(音同Why)… … … 问:作为一位命令式语言的使用者,为什么会突然折腾起Y组合子呢? 答:的确,这事儿要从很久以前的几次搁浅开始说起…上学的时候,从来没有接触 ...
- javascript 阻止多次点击造成的轮播混乱
function nextSlider(){ //使用b作为开关,只有动画完成后才能进行下一次运动 if(b){ //如果b为真,则马上设置b为false,如果startmove的回调没有重新设置b的 ...
- MongoDB学习笔记02
MongoDB中使用find来进行查询,查询就是返回一个集合中文档的子集,子集合的范围从0个文档到整个集合.find的第一个参数决定了要返回哪些文档.空的查询文档{}会匹配集合的全部内容,要是不指定查 ...
- (转)swfobject.js 详细解说
一直想对这个应用做个总结,今天偶然百度到这个效果,为此做个笔记. 用这个js的好处: 1.IE中没有讨厌的虚框问题了.2.提供了完善的版本检测功能,如果版本不够则显示其他东西,比如图片或文字.3.易于 ...
- 1203.4——循环语句 之 for
for循环的一般形式为:for(表达式1; 表达式2; 表达式3){ 语句块} 它的执行过程如下:1) 先求解表达式1. 2) 求解表达式2,若其值为真(非0),则执行循环体,否则结束循环. 3 ...
- 【转载】"library not found for - "解决办法
[摘要:正在我们编译的时间偶然候会报那个毛病"library not found for - " 因为是我们正在项目中应用了一些第三圆的库,便比方我再应用百度的静态库文件的时间,报 ...
- (原+转)ubuntu14中结束多个caffe进程中的某个
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5948237.html 参考网址: http://www.2cto.com/os/201407/3215 ...
- Python 之socket的应用
本节主要讲解socket编程的有关知识点,顺便也会讲解一些其它的关联性知识: 一.概述(socket.socketserver): python对于socket编程,提供了两个模块,分别是socket ...
- PXE简要配置过程
目录 1.所需服务 2.简要配置过程 1.dhcp服务 2.tftp服务 3.提供pxelinux.0配置文件 4.提供系统所需文件 1.所需服务: dhcp服 ...
- You and your research
英文版http://www.cs.virginia.edu/~robins/YouAndYourResearch.html 视频版http://www.youtube.com/watch?v=a1zD ...