angularjs中ng-class的使用
1、方法一 通过数据的双向绑定(不推荐)
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
color:white;
background-color:lightblue;
padding:20px;
}
.tomato {
background-color:coral;
padding:40px;
}
</style>
</head>
<body ng-controller="ctrl"> <p>选择一个类:</p> <input type="button" value="天空色" ng-click="clickEvent1()" />
<input type="button" value="番茄色" ng-click="clickEvent2()" /> <div class="{{class1}}">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div> <script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('ctrl', function($scope){
$scope.clickEvent1 = function() {
$scope.class1 = "sky";
}
$scope.clickEvent2 = function() {
$scope.class1 = "tomato";
}
});
</script> </body>
</html>
2、方法二 对象数组
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
color:white;
background-color:lightblue;
padding:20px;
}
.tomato {
background-color:coral;
padding:40px;
}
</style>
</head>
<body ng-controller="ctrl"> <p>选择一个类:</p> <input type="button" value="天空色" ng-click="clickEvent1()" />
<input type="button" value="番茄色" ng-click="clickEvent2()" /> <div ng-class="{'class1':'sky','class2':'tomato'}[inputClass]">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div> <script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('ctrl', function($scope){
$scope.clickEvent1 = function() {
$scope.inputClass = 'class1';
}
$scope.clickEvent2 = function() {
$scope.inputClass = 'class2';
}
});
</script> </body>
</html>
3、方法三 对象key/value
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
color:white;
background-color:lightblue;
padding:20px;
}
.tomato {
background-color:coral;
padding:40px;
}
</style>
</head>
<body ng-controller="ctrl"> <p>选择一个类:</p> <input type="button" value="天空色" ng-click="clickEvent1()" />
<input type="button" value="番茄色" ng-click="clickEvent2()" /> <div ng-class="{'sky':sky,'tomato':tomato}">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div> <script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('ctrl', function($scope){
$scope.clickEvent1 = function() {
$scope.sky = true;
$scope.tomato = false;
}
$scope.clickEvent2 = function() {
$scope.sky = false;
$scope.tomato = true;
}
});
</script> </body>
</html>
angularjs中ng-class的使用的更多相关文章
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- (九)通过几段代码，理清angularJS中的$injector、$rootScope和$scope的概念和关联关系
$injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- angularJS中$apply()方法详解
这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...
- 深入学习AngularJS中数据的双向绑定机制
来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...
- AngularJS中get请求URL出现跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
随机推荐
- redis_NoSql数据库四大分类
前面简单介绍了什么是NoSql,以及NoSql的应用场景,今天简单来学习一下NoSql的分类 一.KV键值对 典型的介绍:新浪(BerkeleyDB+redis).美团(redis+tair).阿里, ...
- java 继承 String类
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha String 类 是 final修饰 , 是不能 继承的.
- 【UOJ #105】【APIO2014】Beads and wires
http://uoj.ac/problem/105 好神的dp啊. 确定一个点为根之后,蓝线只能是竖着的,不能横跨兄弟. 枚举每个点为根进行树形dp是\(O(n^2)\)的,\(f(x,0/1)\)表 ...
- [BZOJ4817][SDOI2017]树点涂色(LCT+DFS序线段树)
4817: [Sdoi2017]树点涂色 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 692 Solved: 408[Submit][Status ...
- CountDownLatch源码分析
CountDownLatch.Semaphore(信号量)和ReentrantReadWriteLock.ReadLock(读锁)都采用AbstractOwnableSynchronizer共享排队的 ...
- 套题：Codeforces Round #194 (Div. 1) (2/5)
A. Secrets http://www.cnblogs.com/qscqesze/p/4528529.html B. Chips http://www.cnblogs.com/qscqesze/p ...
- 搭建windows server 2008 r2 FTP 后 开启防火墙无法访问的解决办法
转自http://kkworms.blog.51cto.com/540865/558477 今天在windows server 2008 R2上安装了FTP,安装过程如下,然后添加内置防火墙设置,设置 ...
- WPF, WPF Browser Application(XBAP) 和 Silverlight 的区别
由图可见,XBAP与WPF的区别是“受限的”:Silverlight与XBAP的区别是,不需要.NET Framework. 上星期與以前的同事爭論著究竟使用XBAP來開發XX用戶端 (為筆者之前開發 ...
- text段,data段,bss段,堆和栈
转载:http://blog.chinaunix.net/uid-29025972-id-3874376.html 程序编译后生成的目标文件至少含有三个段,分别为:.text..data和.bss ...
- Java：准备学习的高级主题
ClassLoader GC Concurrent Transaction JTA JPA JDBC JNDI JNI JNA JNative OSGI JMS JSTL EL Servlet NIO ...