什么是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. linux系统中.bashrc的妙用

    一.有何作用 .bashrc - The individual per-interactive-shell startup file. .bashrc - 主要保存个人的个性化设置,如命令别名.路径等 ...

  2. mui开发app之webview是什么

    WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,webview被封装在html5+,plus对象中,底层由java,OC实现. 先来谈谈我对webview的理解: 使用mui开发的a ...

  3. 微信小程序框架

    框架 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的 ...

  4. arcgis属性选取like用法

    查询对象为ArcInfo coverage,shapefile, INFO table,dBASE table,ArcSDE data,ArcIMS 要素类,或者 ArcIMS image servi ...

  5. hdu1255 覆盖的面积 线段树+里离散化求矩形面积的交

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1255 求矩形面积的交的线段树题目,刚做了求并的题目,再做这个刚觉良好啊,只要再加一个表示覆盖次数大于1 ...

  6. Oracle 12C 新特性之表分区或子分区的在线迁移

    Oracle 12c 中迁移表分区或子分区到不同的表空间不再需要复杂的过程.与之前版本中未分区表进行在线迁移类似,表分区或子分区可以在线或是离线迁移至一个不同的表空间.当指定了 ONLINE 语句,所 ...

  7. 学习MVC之租房网站(八)- 前台注册和登录

    在上一篇<学习MVC之租房网站(七)-房源管理和配图上传>完成了在后台新增.编辑房源信息以及上传房源配图的功能.到此后台开发便告一段落了,开始实现前台的功能,也是从用户的登录.注册开始. ...

  8. Linux-Zabbix 邮件报警设置

    系统环境 Ubuntu 16.04 在Zabbix服务器端 安装sendmail sudo apt install sendmail 测试发送邮件 echo "正文!" | mai ...

  9. Spring Boot 声明式事务结合相关拦截器

    我这项目的读写分离方式在使用ThreadLocal实现的读写分离在迁移后的偶发错误里提了,我不再说一次了,这次是有要求读写分离与事务部分要完全脱离配置文件,程序员折腾了很久,于是我就查了一下,由于我还 ...

  10. 使用babel编译es6

    起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...