angular的ng-class
项目内想到要替换class时,第一反应是使用angular最为简单粗暴的class改变方式;
在angular中为我们提供了3种方案处理class:
1:scope变量绑定,如上例。(不推荐使用)
2:字符串数组形式。
3:对象key/value处理。
1.scope变量绑定
$scope.test =“classname”;
<div class=”{{test}}”></div>
这种方式虽然可以,但是在controller中出现了class总是显得奇怪,在angular的思想里面controller应该保持纯洁的js。
2.字符串数组形式。
当isActive=true时,class是active,isActive=false时为空,
$scope.isActive = true;
<div ng-class="{true: 'active', false: ''}[isActive]"> </div>
3.对象key/value处理主要针对复杂的class混合。
当 isSelected = true 则增加selected class,当isCar=true,则增加car class,所以你结果可能是4种组合。
$scope.isSelected=true;
<div ng-class {'selected': isSelected, 'car': isCar}"> </div>
当 isSelected = true 则增加selected class,
当isCar=true,则增加car class,
所以你结果可能是4种组合。
个人推荐用2,3两种方式,不建议将class放入controller scope之上,scope需要保持纯洁行,scope上的只能是数据和行为。
angular的ng-class的更多相关文章
- Angular: 执行ng lint后如何快速修改错误
当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...
- ANGULAR 使用 ng build --prod 编译报内存错误的解决办法
如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...
- Angular CLI ng常用指令整理
一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...
- angular Error: [ng:areq]
在使用augularjs的时候,爆了个错误: 后来经过对比,原来是我的<html>标签多了点东西
- Angular实现递归指令 - Tree View
在层次数据结构展示中,树是一种极其常见的展现方式.比如系统中目录结构.企业组织结构.电子商务产品分类都是常见的树形结构数据. 这里我们采用Angular的方式来实现这类常见的tree view结构. ...
- 大话ASP.NET(第二篇,Angular结构篇--翻译)
AngularJS API Docs Welcome to the AngularJS API docs page. These pages contain the AngularJS referen ...
- 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular
现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...
- Angular.js中的$injector服务
一 .angular中的依赖注入 angular的一个很重要的特性就是依赖注入,可以分开理解这4个字. 1.依赖: angular里面的依赖,有angular默认提供的,也有我们自己添加的.默认提供的 ...
- Angular源代码学习笔记-原创
时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...
- 探究Angular依赖注入对象$injector
$injector其实是一个IOC容器,包含了很多我们通过.module()和$provide创建的模块和服务.$injector服务提供了对依赖注入器对象的访问,当然我们也可以调用angular.i ...
随机推荐
- mysql索引需要了解的几个注意
板子之前做过2年web开发培训(入门?),获得挺多学生好评,这是蛮有成就感的一件事,准备花点时间根据当时的一些备课内容整理出一系列文章出来,希望能给更多人带来帮助,这是系列文章的第一篇 注:科普文章一 ...
- Android中this.*与*.this还有*.class的区别是什么?
这些是java的基础知识.首先this代表本类的一个引用,this.*表示调用本类的某个方法,这个时候通常可以省略this:但在内部类中不能省略,否则编译器会认为是内部类的引用,所以要在this前加上 ...
- easyeclipse for php 如何默认显示行号
呃... 相当简单 window->preferences->PHPeclipse web development->php 然后找到appearance选项卡 在 show lin ...
- Hadoop家族学习路线图--转载
原文地址:http://blog.fens.me/hadoop-family-roadmap/ Sep 6, 2013 Tags: Hadoophadoop familyroadmap Comment ...
- Linux解压/压缩命令——tar、gz、tar.gz、tgz、bz2、tar.bz2、Z、zip、rar、lha
.tar 解包:tar -xvf FileName.tar 打包:tar -cvf FileName.tar DirName ——————————————— .gz 解压1:gunzip FileNa ...
- Linux 学习笔记 查看文件内容诸多命令
查看文件内容 1.查看文件统计信息 stat 提供文件系统上某个文件的所有状态信息 2.查看文件类型 file 用来查看文件类型 (该命令将文件分成3类:文本类型:可执行文件:数据文件) 如果你有从未 ...
- javascript 通过面向对象编写圆形数字时钟
效果如图所示,代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- php 发送邮件
php我们可以使用系统的mail函数去发送邮件 但是需要配置一下邮件环境 这里选择使用PHPMailer 这样比较方便 首先下载PHPMailer:https://github.com/Synchr ...
- Linux命令行下cp,rm,mv命令的使用
以下的内容来源于<鸟哥的私房菜> Linux命令行下的复制.删除与移动:cp,rm,mv cp(copy)复制 cp这个命令的用途很多,除了单纯的复制之外,还可以创建链接文件 ...
- [改善Java代码]优先使用整型池
建议28: 优先使用整型池 看如下代码: public class Client { public static void main(String[] args) { Scanner input = ...