angular的ng-class

时间:2022-02-11 07:04:45

项目内想到要替换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&colon; 执行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&colon; &lbrack;ng&colon;areq&rsqb;

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

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

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

  6. 大话ASP&period;NET&lpar;第二篇&comma;Angular结构篇--翻译&rpar;

    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&period;js中的&dollar;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依赖注入对象&dollar;injector

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

随机推荐

  1. canvas三角函数应用

    这个是圆圈旋转的简单案例 var canvas=document.getElementById("canvas"); var cxt=canvas.getContext(&quot ...

  2. 024医疗项目-模块二:药品目录的导入导出-HSSF导入类的学习

    我们之前学习了怎么把数据的数据导出来保存到Excle中,这篇文章我们学习怎么Excel数据导出然后插入到数据库中. 我们先学习HSSF怎么用来导出数据. 看官方教程步骤如下: 第一步: 创建一个wor ...

  3. js&amp&semi;jq 发送验证码倒计时

    <input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function t ...

  4. c programming language &lowbar;&lowbar;&lowbar; 5&lowbar;2&period;c

    #include <stdio.h> #include <ctype.h> #define BUG printf("here!bug!\n"); int g ...

  5. 【POJ】【1739】Tony&&num;39&semi;s Tour

    插头DP 楼教主男人八题之一! 要求从左下角走到右下角的哈密顿路径数量. 啊嘞,我只会求哈密顿回路啊……这可怎么搞…… 容易想到:要是把起点和重点直接连上就变成一条回路了……那么我们就连一下~ 我们可 ...

  6. bzoj1063

    仔细观察可以发现,这个规划路径很像树链剖分 树链剖分的经典定理:任意一个点到根的所经过轻边不超过logn 而这个规划路径所走公路相当于轻边,也就是说,不便利度不会很大 那么直接dp即可,设f[x,i, ...

  7. 对同一元素设置overflow-x&colon;hidden&comma;overflow-y&colon;visible&semi;属性值不生效

    作者:孙志勇 微博 日期:2016年12月5日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间 ...

  8. windows核心编程-信号量&lpar;semaphore&rpar;

    线程同步的方式主要有:临界区.互斥区.事件.信号量四种方式. 前边讲过了互斥器线程同步-----windows核心编程-互斥器(Mutexes),这章我来介绍一下信号量(semaphore)线程同步. ...

  9. BZOJ&lowbar;3697&lowbar;采药人的路径&lowbar;点分治

    BZOJ_3697_采药人的路径_点分治 Description 采药人的药田是一个树状结构,每条路径上都种植着同种药材. 采药人以自己对药材独到的见解,对每种药材进行了分类.大致分为两类,一种是阴性 ...

  10. P1622 释放囚犯

    传送门 区间DP简介: 在写这题前,需要先弄清楚区间DP是如何操作的: 区间DP的做法还是相对固定的,没有其他类型DP的复杂多变.主要思想就是先在小区间进行DP得到最优解,然后再利用小区间的最优解合并 ...