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不存在, ...
随机推荐
- linux下编译安装nginx
1.首先下载稳定版nginx1.10.2 使用wget命令下载 wget http://nginx.org/download/nginx-1.10.2.tar.gz 2.然后解压 tar -zxvf ...
- [第一阶段] Python学习
首先声明一下,我这个学习计划是关于学习Python的. 先说一下起因:我自己接触Python算是很久了,目前仍没学会,很失败,很惭愧.所以这次一方面简单分析一下自学会碰到的问题:另一方便,我想到了一种 ...
- 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果(scroll()、offsetTop、滚动监听的妙用)
想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...
- 关于dom脚本编程的一些优秀理念总结
1.平稳退化(优雅降级) 目的:当浏览器不支持js或者js被用户禁用时,做到即使不运行js,网页的可读性亦不会受到太大的影响. 理念:使用最新的技术面向高级浏览器构建最强的功能及用户体验,然后针对低级 ...
- 详解Java动态代理机制
之前介绍的反射和注解都是Java中的动态特性,还有即将介绍的动态代理也是Java中的一个动态特性.这些动态特性使得我们的程序很灵活.动态代理是面向AOP编程的基础.通过动态代理,我们可以在运行时动态创 ...
- easyui datebox定位到某一个日期, easyui datebox直接定位到具体的日期, easyui datebox MoveTo方法使用
easyui datebox定位到某一个日期, easyui datebox直接定位到具体的日期, easyui datebox MoveTo方法使用 >>>>>> ...
- 创建并发布npm包
1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm np ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- [刷题]算法竞赛入门经典(第2版) 4-2/UVa201 - Squares
书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,20 ms) #include<iostream> #include<cs ...
- centos6 安装 ansible_ui
安装过程其实并不复杂,只不过出现的问题,遇到的问题比较多,也主要参考网上https://github.com/alaxli/ansible_ui/issues/15 中提到的方法,只不过我遇到自己的问 ...