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不存在, ...
随机推荐
- [Git]08 如何自动补全命令
[Git]08如何自动补全命令 如果你用的是 Bash shell,可以试试看 Git 提供的自动完成脚本.下载 Git 的源代码,进入 contrib/completion 目录,会看到一个g ...
- PHP 安装 Xdebug 扩展(一)
一.前言 1. Xdebug 简介 Xdebug 是一个开放源代码的 PHP 程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况.当前最新版本为 Xdebug 2.5.0 ...
- [HNOI2004]宠物收养场 Treap前驱后继
凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,凡凡根据领养者的要求通过他自己发明的一个特殊的公式,得出该领养者希望领 ...
- angularjs ng-class
ng-class指令可以设置一个键值对,用于决定是否添加一个特定的类名,键为class名,值为bool类型表示是否添加该类名 <style> .red { color: red; } .g ...
- IOS(二)基本控件UIButton、简易动画、transform属性、UIImageView
UIButton //1.设置UIButton 的左右移动 .center属性 获得 CGPoint 来修改x y //1.设置UIButton 的放大缩小 bounds属性 获得CGRect 然后通 ...
- OC中NSFileManager
NSFileManager介绍 NSFileManager是用来管理文件系统的 它可以用来进行常见的文件\文件夹操作(拷贝.剪切.创建等) NSFileManager使用了单例模式singleton ...
- 盘点国内外那些有野心的BI公司
在当前BI商业智能市场打开并被广泛应用的背景下,国内外涌现出一大批优秀的BI产品.当然好的BI产品一定离不开好的BI公司,在最新发布的Gartner 2017 年<商业智能和分析平台魔力象限&g ...
- [故障公告]14:39-15:39博客站点部分负载均衡遭遇3次20G以上的流量攻击
非常抱歉,今天下午14:39-15:39左右,博客站点的部分负载均衡遭遇3次20G以上的流量攻击,造成很多用户不能正常访问.由此给您带来麻烦,请您谅解. 攻击的过程是这样的: 14:39,第1次攻 ...
- [刷题]算法竞赛入门经典(第2版) 5-1/UVa1593 - Alignment of Code
书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa1593 - Alignment of Code #include&l ...
- Hbuilder常用功能汇总
引用 样式表: mui.min.css Js:mui.min.js 常用功能 获取页面 var webView=plus.webview.currentWebview();//获取当前页 var we ...