angular指令ng-class巧用
什么是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巧用的更多相关文章
- Angular CLI ng常用指令整理
一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...
- angular指令之complie和link不得不说的故事
angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...
- angular指令深度学习篇
angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...
- Angular指令渗透式理解
通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...
- Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证
最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...
- angular指令大全
这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 ...
- Angular指令(一)
Angular开发者手册重点翻译之指令(一) 创建自定义的指令 这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它. 什么是指令 在高的层面上讲,指令是DOM元素中的 ...
- angular指令
转自:http://www.cnblogs.com/rohelm/p/4051437.html 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整 ...
- angular指令的compile,prelink 和 postlink以及controller
一. 指令模板选项有complie和link两个字段,两者之间存在如下关系: 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段. 当compile不存在, ...
随机推荐
- vue 调用高德地图
一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...
- Apache Ranger对HDFS的访问权限控制的原理分析(一)
介绍 Aapche Ranger是以插件的形式集成到HDFS中,由Ranger Admin管理访问策略,Ranger插件定期轮询Admin更新策略到本地,并根据策略信息进行用户访问权限的判定.Rang ...
- eharts入门篇一
1.导入文件样式 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本. 2,引入 ECharts 文件 < ...
- 通过 U 盘启动重装 macOS 系统
重装系统是工作和生活中经常需要做的事情,作为一名开发人员,学会该技能你才是一名合格的程序猿!以后再也不会遇到"程旭元你会装系统吗?"的尴尬了!本文主要介绍怎样通过U盘启动重新安装 ...
- poj3061尺取法
A sequence of N positive integers (10 < N < 100 000), each of them less than or equal 10000, a ...
- hdu4185二分图匹配
Thanks to a certain "green" resources company, there is a new profitable industry of oil s ...
- hdu3746 kmp求循环节
CC always becomes very depressed at the end of this month, he has checked his credit card yesterday, ...
- 解决NSTimer循环引用Retain Cycle问题
解决NSTimer循环引用Retain Cycle问题 iOS开发中以下的情况会产生循环引用 block delegate NSTimer 循环引用导致一些对象无法销毁,一定的情况下会对我们横须造成影 ...
- JDBC连接错误(Illegal mix of collations。。。)
连接java和mysql时出现了这样的报错: java.sql.SQLException: Illegal mix of collations (latin1_swedish_ci,IMPLICIT) ...
- Linux 按时间批量删除文件(删除N天前文件)
需要根据时间删除这个目录下的文件,/home/lifeccp/dicom/studies,清理掉20天之前的无效数据. 可以使用下面一条命令去完成: -name "*.*" -ex ...