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 ...
随机推荐
- github开发
从0开始学习 GitHub 系列之「初识 GitHub」 从0开始学习 GitHub 系列之「加入 GitHub」 从0开始学习 GitHub 系列之「Git 速成」 从0开始学习 GitHub 系列 ...
- php 中文繁简体转换
<?php $testC = new TestC (); $testC->index (); class TestC { private $utf8_gb2312; private $ut ...
- python 列表排序
转自http://www.iplaypython.com/jinjie/jj114.html reverse()方法 将列表中元素反转排序,比如下面这样>>> x = [1,5,2, ...
- 我的nodejs学习之路1
距离上次写文章类东西已经有4-5年了,猛然写东西有种提笔忘字的感觉. 言归正传,这是一篇记录我自己学习nodejs的文章,在写下这篇文章的时候我也不是什么大牛,也不是很了解nodejs这项技术.之所以 ...
- MySql.Data.dll 不支持输出参数
insert INTO stu(name) VALUES('maimai'); set @ReturnValue=@@IDENTITY; string sql="insert INTO st ...
- Navicat for mysql 远程连接 mySql数据库10061、1045错误
原文地址:http://www.111cn.net/database/mysql/46377.htm 有朋友可能会碰到使用Navicat for mysql 远程连接 mySql数据库会提示10061 ...
- tomcat启动超时问题
当启动tomcat时候出现 Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds. If the s ...
- 【干货】微信场景之H5页面制作免费工具大集合
营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...
- DTP激活时报Overlapping
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- iOS textField输入金额的限制,小数点前9位,后面两位
iOS textField输入金额的限制,小数点前9位,后面两位,如果不加小数点,最大位数是9位,加上小数点,最大位数是12位,超出最大位数可删除 - (BOOL)textField:(UITextF ...