项目内想到要替换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的更多相关文章

  1. Angular: 执行ng lint后如何快速修改错误

    当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...

  2. ANGULAR 使用 ng build --prod 编译报内存错误的解决办法

    如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...

  3. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  4. angular Error: [ng:areq]

    在使用augularjs的时候,爆了个错误: 后来经过对比,原来是我的<html>标签多了点东西

  5. Angular实现递归指令 - Tree View

    在层次数据结构展示中,树是一种极其常见的展现方式.比如系统中目录结构.企业组织结构.电子商务产品分类都是常见的树形结构数据. 这里我们采用Angular的方式来实现这类常见的tree view结构. ...

  6. 大话ASP.NET(第二篇,Angular结构篇--翻译)

    AngularJS API Docs Welcome to the AngularJS API docs page. These pages contain the AngularJS referen ...

  7. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

  8. Angular.js中的$injector服务

    一 .angular中的依赖注入 angular的一个很重要的特性就是依赖注入,可以分开理解这4个字. 1.依赖: angular里面的依赖,有angular默认提供的,也有我们自己添加的.默认提供的 ...

  9. Angular源代码学习笔记-原创

    时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...

  10. 探究Angular依赖注入对象$injector

    $injector其实是一个IOC容器,包含了很多我们通过.module()和$provide创建的模块和服务.$injector服务提供了对依赖注入器对象的访问,当然我们也可以调用angular.i ...

随机推荐

  1. Python学习 之 数据类型(邹琪鲜 milo)

    1.Python中的数据类型:数字.字符串.列表.元组.字典 2.数字类型包括整型.长整型.浮点型.复数型 type(number):获取number的数据类型 整型(int):范围:-2,147,4 ...

  2. Linux 2.6的内核编译过程

    由于上课需要,老师指定使用linux-2.6.26内核.本人是菜鸟级别的. 由于本人安装的ubuntu系统中,没有自带GCC,故需要自己安装gcc, 首先启用ROOT权限  输入:sudo -i 获取 ...

  3. SqlServer高版本数据本分还原到低版本方法

    最近遇见一个问题: 想要将Sqlserver高版本备份的数据还原到低版本SqlServer上去,但是这在SqlServer中是没法直接还原数据库的,所以经过一系列的请教总结出来一下可用方法. 首先.你 ...

  4. UseAdaptiveSizePolicy与CMS垃圾回收同时使用导致的JVM报错

    系统在灰度环境上变更时发现JVM启动报错,详细检查JVM配置参数,发现新境了如下配置: -XX:+UseAdaptiveSizePolicy和-XX:+UseConcMarkSweepGC 初步猜想是 ...

  5. 2012蓝桥杯C组本科决赛答案

    题目: 脱氧核糖核酸即常说的DNA,是一类带有遗传信息的生物大分子.它由4种主要的脱氧核苷酸(dAMP.dGMP.dCMT和dTMP)通过磷酸二酯键连接而成.这4种核苷酸可以分别记为:A.G.C.T. ...

  6. Ajax发送FormData对象封装的表单数据

    前端页面: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  7. Git CMD - show: Show various types of objects

    命令格式 git show [options] <object>…​ 实例 a) 查看某次提交的信息 $ git show <commit> b) 查看远程仓库的信息. git ...

  8. Entity Framework + WCF REST JSON Service

    利用EF 和WCF 建立一个REST JSON Service. 首先我们要下载一个Visual Studio 的Template 叫 "ADO.NET C# POCO Entity Gen ...

  9. 160多个android开源代码汇总

    第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Pro ...

  10. 把CheckedListBoxControl设置为单选框

    private void chkControl_ItemChecking(object sender, DevExpress.XtraEditors.Controls.ItemCheckingEven ...