ng-class用法小记

angularJS为我们提供了3种方案处理class:

  1:scope变量绑定(不推荐使用);//controller涉及了classname,作者希望的是controller是一个干净的纯javascript意义的object。
  2:字符串数组形式;(针对class简单变化,具有排斥性的变化)
  3:对象key/value处理;(主要针对复杂的class混合)

代码如下:

  a:function name($scope){

    $scope.test="className";  

  }

  <div class="{{test}}"></div>

  b:function name($scope){

    $scope.isActive=true;

  }

  <div ng-class="{true:‘active‘,false:‘inactive‘}[isActive]"></div>

  

  c:function name($scope){

  }

  <div ng-class="{‘selected‘:isSelected,‘car‘:isCar}"></div>//当 isSelected = true 则增加selected class,当isCar=true,则增加car class,所以你结果可能是4种组合。

  在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO(plain object javascript object),与view完全的隔离(交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如方法a。

  参考链接http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

---恢复内容结束---

angularJS为我们提供了3种方案处理class:
  1:scope变量绑定(不推荐使用);//controller涉及了classname,作者希望的是controller是一个干净的纯javascript意义的object。
  2:字符串数组形式;(针对class简单变化,具有排斥性的变化)
  3:对象key/value处理;(主要针对复杂的class混合)

代码如下:

  a:function name($scope){

    $scope.test="className";  

  }

  <div class="{{test}}"></div>

  b:function name($scope){

    $scope.isActive=true;

  }

  <div ng-class="{true:‘active‘,false:‘inactive‘}[isActive]"></div>

  

  c:function name($scope){

  }

  <div ng-class="{‘selected‘:isSelected,‘car‘:isCar}"></div>//当 isSelected = true 则增加selected class,当isCar=true,则增加car class,所以你结果可能是4种组合。

  在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO(plain object javascript object),与view完全的隔离(交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如方法a。

  参考链接http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

时间: 2024-10-18 06:41:03

ng-class用法小记的相关文章

Matlab norm 用法小记

Matlab norm 用法小记 matlab norm (a) 用法以及实例 norm(A,p)当A是向量时norm(A,p)   Returns sum(abs(A).^p)^(1/p), for any 1 <= p <= ∞.norm(A)    Returns norm(A,2)norm(A,inf)   Returns max(abs(A)).norm(A,-inf)   Returns min(abs(A)). 当A是矩阵时n = norm(A) returns the larg

Junit的除了@Test之外的用法小记,超时、异常、参数、suite、mock

成就与否,15%在于个人的才干和技能,而85%在于做人的技术和技巧.和大众融洽地相处,以和谐取悦于人,留意尊重别人的立场,让每个人都觉得自己是重要的,也就得到了讨人喜欢的秘决了. 最近整理代码的时候,总习惯把一些常用的工具类和方法等都写在junit中,这样可以方便于在想用的时候直接copy,在用junit的时候学到了一些比较有用的东西,记录如下: 1.使用junit进行超时测试 @Test(timeout=2000) public void testTimeout() throws Interr

nc用法小记

By francis_hao    Jun 30,2017 ncat:连接和重定向套接字 概要 ncat [OPTIONS...] [hostname] [port] 描述 ncat 是一个集成的网络工具包,从命令行通过网络读写数据.它被设计成一个提供即时连接到其他应用和用户的可靠性后端工具,ncat不仅仅工作于IPv4和IPv6,它提供给用户一个近乎无限数量的潜在用途. ncat提供了以下特性:重定向TCP.UDP和SCTP端口到其他站点,支持SSL,通过SOCKS4或HTTP的代理连接等.

readelf用法小记

By francis_hao    Feb 14,2017 显示ELF文件的信息 用法概述 readelf和objdump类似,不过,readelf会显示更详细的信息,而且独立于BFD库,因此当BFD库出问题时readelf不会受影响. 选项解释 -d --dynamic 显示正文的动态部分,可用于显示程序依赖的动态库 -s --symbols --syms 显示符号表,包含但不限于 函数名 变量名-- -h --file-header 显示在文件开始处的ELF头信息,包含但不限于 魔数 大小端

gcc用法小记

By francis_hao    Feb 13,2017 概要 这里只列出了最常用的选项 选项解释 -c|-S|-E 启动gcc编译器时,它会顺序执行预处理.编译.汇编和连接(四个阶段的详细介绍见[参考1]).这几个选项可以指定gcc停止位置. -c    程序不执行连接阶段,生成.o目标文件 -S    程序不执行汇编阶段,生成汇编格式.s的文件(编译阶段即将源文件编译成汇编格式文件) -E    程序不执行编译阶段,生成预处理过的源文件 -std=standard 指定语言标准,目前只支持

printf函数用法小记

By francis_hao    Aug 26,2017 C语言中printf函数是一个比较常用的函数,但是常用并不代表完全了解,本文翻译了printf的man手册,介绍了其全部功能(不包括man手册中不建议使用的). printf – 格式化输出转换 概述 #include <stdio.h>int printf(const char *format, ...); 描述 printf()函数通过给定的format产生格式化的输出. 若函数执行成功,返回打印的字节数(不包括字符串结尾的nul

bash shell用法小记

shell的使用博大精深,,本人梳理基础知识,整理一下简单的用法,具体的请因需求自行研究. 1. 计算 # echo $((1+2)) 3 # echo $((1+2+3)) 6 # echo 3+2+5 |bc 10 2. if的用法 if [ $i -eq 0 ]; then     xxx else     xxx fi 整数比较: -eq 等于,如:if [ "$a" -eq "$b" ]    -ne 不等于,如:if [ "$a" -

ss命令用法小记

By francis_hao    Nov 4,2017 ss是一个查看socket的实用工具 概要 ss [options] [ FILTER ] 描述 ss可以查看socket的统计信息,它允许像netstat那样显示信息. 选项 当没有指定选项时,会列出打开的非监听TCP sockets,也就是已经建立连接的socket. 选项 说明 -h, --help 显示选项的用法总结 -V, --version 输出版本信息 -n, --numeric 不去解析服务名(只显示端口号) -r, --

watch用法小记

By francis_hao    Jun 30,2017 watch:周期性的执行一个一个程序,并全屏显示输出 概述 watch [options] command 描述 watch重复的运行command,显示它的输出和错误(如果有).这可以让你观察程序输出的变动,默认程序每2秒运行一次,默认watch会一直运行直到被中断 选项 选项 说明 -d, --differences[=<permanent>] 高亮显示顺序输出中的变动部分 -n, --interval seconds 指定更新间

scanf函数用法小记

By francis_hao    Aug 26,2017 scanf – 输入格式转换 概述 #include <stdio.h>int scanf(const char *format, ...); 描述 该函数通过format扫描标准输入stdin, format包含转换描述说明,如果需要转换,那么转换后的结果存储在format之后的指针参数中,每个指针参数类型必须要正确对应转换说明.如果format中转换说明符的个数,超过了后面的指针参数,那么结果将是未定义的.反过来,如果指针参数的数