什么是ng-class

ng-class最大的妙用就是可以根据你的逻辑表达式。来添加或移除对应的class

ng-class是angular.js里面内置的一个指令。

项目中,有时候,我们需要根据需求来切换不同的class

function bb($scope){
$scope.ss="className";
}
<div class="{{ss}}"></div>

这种方式是scope变量绑定方式,个人觉得妙用谈不上,还不如直接写class=什么的

字符串方式,比较长用

function bu($scope) {
$scope.ss= true;
} <div ng-class="{true: 'a', false: 'b'}[ss]"></div>

根据你的逻辑去切换 ss的true或者false,来显示对应的cass

对象key/valu处理

function Ctr($scope) { 

}

<div ng-class {'selected': isSelected, 'car': isCar}"></div> 

当 isSelected = true 则增加selected class,当isCar=true,则增加car class。以此类推。

angular指令ng-class巧用的更多相关文章

  1. Angular CLI ng常用指令整理

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

  2. angular指令之complie和link不得不说的故事

    angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...

  3. angular指令深度学习篇

    angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...

  4. Angular指令渗透式理解

    通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...

  5. Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证

    最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...

  6. angular指令大全

    这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 ...

  7. Angular指令(一)

    Angular开发者手册重点翻译之指令(一) 创建自定义的指令 这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它. 什么是指令 在高的层面上讲,指令是DOM元素中的 ...

  8. angular指令

    转自:http://www.cnblogs.com/rohelm/p/4051437.html 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整 ...

  9. angular指令的compile,prelink 和 postlink以及controller

    一. 指令模板选项有complie和link两个字段,两者之间存在如下关系: 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段. 当compile不存在, ...

随机推荐

  1. 规范模式-------From ABP Document

    介绍 规范模式是一种特定的软件设计模式,通过使用布尔逻辑 (维基百科)将业务规则链接在一起,可以重新组合业务规则. 在实际中,它主要用于 为实体或其他业务对象定义可重用的过滤器. 例 在本节中,我们将 ...

  2. hdu1166树状数组

    C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...

  3. Spring Boot 整合 MyBatis

    前言 现在业界比较流行的数据操作层框架 MyBatis,下面就讲解下 Springboot 如何整合 MyBatis,这里使用的是xml配置SQL而不是用注解.主要是 SQL 和业务代码应该隔离,方便 ...

  4. luogu P1007 独木桥

    序:难度标签是普及-,便觉得应该非常简单,结果发现有一个弯半天没绕过来,所以认为这道题对于第一次做的人来讲还是很是比较有意义的. 题目描述: 长度为len的桥上有n个士兵,你不知道他们的初始方向.已知 ...

  5. 1008 Elevator

    Problem Description The highest building in our city has only one elevator. A request list is made u ...

  6. linux下实时监测命令运行结果工具:watch

    watch是一个非常实用的工具,可以实时监测一些经常变化的命令结果或文件,而不需要手动一次一次的输入命令. 语法: watch [选项] [命令参数] 选项: -n :指定刷新间隔时间,默认2秒. - ...

  7. selenium+python环境的搭建的自动化测试

    一.安装python: 我安装的是2.7.13版本的:可以在CMD下 运行python命令查看是否安装python,以及安装版本: 在https://www.python.org/getit/这个地址 ...

  8. springMvc注解之@ResponseBody和@RequestBody

    简介 springmvc对json的前后台传输做了很好封装,避免了重复编码的过程,下面来看看常用的@ResponseBody和@RequestBody注解 添加依赖 springmvc对json的处理 ...

  9. ThinkPHP集成万象优图

    项目原因 不告诉你,反正需要把腾讯云的万象优图整合进来. 下载PHP版的万象优图的SDK 下载地址:https://github.com/tencentyun/image-php-sdk git cl ...

  10. 刨根究底字符编码之四——EASCII及ISO 8859字符编码方案

    EASCII及ISO 8859字符编码方案   1. 计算机出现之后,从美国发展到欧洲,由于欧洲很多国家中所用到的字符中,除了基本的美国也用的那128个ASCII字符之外,还有很多衍生的拉丁字母等字符 ...