angularJS ngClass如何使用
<!doctype html>
<html ng-app="firstApp">
<head>
<meta charset="utf-8">
<script src="angular-1.3.0.js"></script>
</head>
<body>
<style>
.it{color:#ff7300;margin:10px;}
.curr{background: #006600;}
.fs18{font-size:30px;}
.pd20{padding:20px;background:#26a3db;} </style>
<pre>
1.字符串数组形式。
< div ng-class="{true: 'active', false: 'inactive'}[isActive]">< /div>
相当于对这个求值:({true: 'active', false: 'inactive'})[false] ({true: 'active', false: 'inactive'})[true]
即 var ct={true: 'active', false: 'inactive'};
ct[true]或ct[false]得到值为'active'或 'inactive'
2.scope变量绑定,(不推荐使用)
$scope.test =“classname”;
< div class=”{{test}}”>< /div>
3. 象key/value方式,处理class混合
< div ng-class="{'selected': isSelected, 'car': isCar}">< /div>
</pre>
<div ng-controller="cartController">
<div class="it {{test}}">scope变量绑定</div>
<div class="it" ng-click="selM()" ng-class="{true: 'curr', false: ''}[isActive]">字符串数组形式,单击</div>
<div class="it" ng-class="{'fs18': isFs, 'pd20':isPd }" ng-click="selM3()">对象key/value方式,处理class混合..将应用it fs18 pd20 。其中it是默认的</div>
</div>
<script>
var app=angular.module('firstApp',[]);//app模块名
app.controller('cartController',function($scope){
$scope.test='curr';//直接方式。
$scope.isActive=false;
$scope.selM=function(){
$scope.isActive=true;
console.log('当前选中否',$scope.isActive)
} //第3种方式
$scope.isFs=false;
$scope.isPd=false;
$scope.selM3=function(){
$scope.isFs=true;
$scope.isPd=true;
}
}); </script>
</body>
</html>
angularJS ngClass如何使用的更多相关文章
- AngularJS ng-class用法
mark from https://my.oschina.net/gejiawen0913/blog/188547 ng-class是AngularJS预设的一个指令,用于动态自定义dom元素的css ...
- [Angularjs]ng-class,ng-class-even,ng-class-odd
写在前面 最近在通过angularjs将数据绑定到前端,其中也涉及到很多新的东西,一些效果还是很有必要实现的.在使用中发现ng-class,ng-class-even.ng-class-odd的使用, ...
- AngularJs ng-class 使用
今天在做项目的时候要对表格内的部分的最大最小值高亮 解决方案 1. 引用 ng-class 2. 引用原型求最大最小值 实例 AngularJs HTML 代码 <table class=&qu ...
- AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle
这几个都关于样式及类名修改的,所以先把样式代码贴上吧. .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个,下面进入正题. ngClass ngCla ...
- angularjs ng-class 两种用法
ng-class="{'active':current.actived_tree==item}" ng-class="{true:'label-danger white- ...
- angularjs ng-class
ng-class指令可以设置一个键值对,用于决定是否添加一个特定的类名,键为class名,值为bool类型表示是否添加该类名 <style> .red { color: red; } .g ...
- [Angularjs]系列——学习与实践
写在前面 这个系列是来这家公司到现在,边用边学,以及在工作中遇到的问题进行的总结.深入的东西不多,大多是实际开发中用到的东西. 这里做一个目录,方便查看. 系列文章 [Angularjs]ng-sel ...
- [Angularjs]单页应用之分页
写在前面 在项目中,用到单页应用的分页,当时想到使用滚动加载的方案,可是几次尝试都没配置成功,闲着无聊就弄了一个demo. 系列文章 [Angularjs]ng-select和ng-options [ ...
- [Angularjs]国际化
写在前面 在项目中,有用到国际化,跟着就了解了下使用angularjs实现的国际化,这里做一下记录. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]n ...
随机推荐
- hadoop多硬盘配置注意点
[一].实验环境 1.1.环境 hadoop 2.6.0 namenode 2个 各增加 2个1T硬盘 datanode 3个 各增加3个1T硬盘 1.2.挂载硬盘 fdisk 分区 ( ...
- linux的mount(挂载)命令详解
本文介绍mount命令的用法,以及技巧光盘镜像文件.移动硬盘及U盘的方法. 挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用 ...
- PV、UPV、UV简介
1.PV: PV的全称是Pageview,中文的意思是:综合浏览量. 浏览量.页面的浏览次数,衡量网站用户访问的网页数量,用户每打开/刷新一次页面就记录一次,多 次打开会累计. 2.UPV: UPV的 ...
- HDU1232 畅通工程 并查集
畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- 子坐标系C在父坐标系W中的旋转问题
关键词:空间旋转.旋转轴.刚体旋转 用途:相机位姿估计.无人机位姿估计 文章类型:概念.公式总结(本文不带推倒过程,若想了解公式是如何推出来的请自习搜索文献),C++函数展示 @Author:VSha ...
- HDU 5938 Four Operations(四则运算)
p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: Calibri; font-s ...
- C++Primer 5th 练习 12.19
这阵子真是太忙了, 连续做了四个课设. 当然这并不能作为好久没写博客的借口, 没写博客的主要原因只有一个: 懒. 最近又开始回顾C++的语法与特性(据说C++就是一门需要反复回顾的语言),以及学习C+ ...
- Ubuntu 12.04 Virtualbox 启用USB 设备支持
转载自:http://www.cnblogs.com/ericsun/archive/2013/06/10/3130679.html 具体步骤在上面的链接中 今天在ubuntu下安装了Virtualb ...
- python走起之第十三话
前景介绍 到目前为止,很多公司对堡垒机依然不太感冒,其实是没有充分认识到堡垒机在IT管理中的重要作用的,很多人觉得,堡垒机就是跳板机,其实这个认识是不全面的,跳板功能只是堡垒机所具备的功能属性中的其中 ...
- rxjava源码中的线程知识
rxjava源码中的线程知识 rx的最精简的总结就是:异步 这里说一下以下的五个类 1.Future2.ConcurrentLinkedQueue3.volatile关键字4.AtomicRefere ...