在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用法的更多相关文章

  1. 【转】ng-class的用法

    原文出处:https://segmentfault.com/a/11... 在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现 ...

  2. ng2048源码阅读

    ng2048源码阅读 Tutorial: http://www.ng-newsletter.com/posts/building-2048-in-angularjs.html Github: http ...

  3. ng 1.2 ng-bind-html 用法

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

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

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

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

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

  6. ng指令之 ng-class 篇

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

  7. [Ng]Angular应用点概览

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

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

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

  9. sed命令用法详解

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

  10. AngularJS简单用法

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

随机推荐

  1. HTTPS那些事(一) HTTPS原理

    谣言粉碎机前些日子发布的<用公共WiFi上网会危害银行账户安全吗?>,文中介绍了在使用HTTPS进行网络加密传输的一些情况,从回复来看,争议还是有的.随着网络越来越普及,应用越来越广泛,一 ...

  2. [转载]OpenSUSE 13.2/13.1 安装搜狗拼音输入法

    1. 添加 M17N 源: 13.2: sudo zypper ar -f http://download.opensuse.org/repositories/M17N/openSUSE_13.2/ ...

  3. RBAC 基于角色的权限管理的简单实现

    1.什么是权限管理,权限管理就是对后台功能的细分,和对不同工作人员划分不同的工作的管理 RBAC是如何实现的,通过对不同控制器和控制器不同方法的限制,实现的管理. 要实现RBAC需要三张表,一张用户表 ...

  4. oracle之Flash Recovery Area全面介绍 (转载)

    1. 设置闪回恢复区闪回恢复区主要通过3个初始化参数来设置和管理 db_recovery_file_dest:指定闪回恢复区的位置db_recovery_file_dest_size:指定闪回恢复区的 ...

  5. SSE2 Intrinsics各函数介绍[转]

    SIMD相关头文件包括: //#include <ivec.h>//MMX //#include <fvec.h>//SSE(also include ivec.h) //#i ...

  6. makefile 单独编译一个文件

    #!/sh/bin .SUFFIXES:.c.o CDIR = /Users/shelley/c BINDIR = $(CDIR)/bin CC = gcc CFLAGS = -g -O RM = r ...

  7. https://github.com/aptana/studio3/releases aptana

    https://github.com/aptana/studio3/releases  aptana

  8. Django学习(七) 创建第一个Django项目

    如果这是你第一次使用Django,你必须进行一些初始设置.即,您将需要自动生成一些代码,建立了Django项目. 从命令行.cd进入一个目录,你想要存储您的代码,然后运行以下命令: django-ad ...

  9. UltraEdit的语法高亮显示配置

    今天吴同学看到我电脑中有UltraEdit好奇地问我会不会用,我那个汗啊,不会用我装它干什么啊?其实当时装UltraEdit主要是用来写Java的,没有想到,工作一忙顾及不上学习Java的事情了.于是 ...

  10. relative与absolute相结合

    relative会把别人挤下去, absolute会跑偏. 两者结合就会很好的解决问题. <span class='pic_selected' style='position:relative; ...