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 以前了解过 ...
随机推荐
- Maven的安装及修改为阿里云下载依赖
使用JAVA工程管理越来越多的jar包,担心导错了,多导了,漏导了怎么办? 换一个IDE项目后项目会不会出一堆BUG,看的头皮发麻? 自己写的代码放在别人的机器上运行会不会出问题? Maven的强大毋 ...
- nyoj 18 The Triangle
The Triangle 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 (Figure 1) Figure ...
- FastReport.Net使用：[2]添加MSSQL数据源一
如何使用MSSQL表作为数据源 1.点击FastReport设计器中Data->Add Data Source菜单项,打开数据源添加向导. 2.添加新的数据连接. 点击 New connecti ...
- 【洛谷】P1176： 路径计数2【递推】
P1176 路径计数2 题目描述 一个N×N的网格,你一开始在(1,1),即左上角.每次只能移动到下方相邻的格子或者右方相邻的格子,问到达(N,N),即右下角有多少种方法. 但是这个问题太简单了,所以 ...
- 中国剩余定理 hdu 3579
HDU 3579 Hello Kiki Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- bzoj 2038 小Z的袜子 莫队算法
题意 给你一个长度序列,有多组询问,每次询问(l,r)任选两个数相同的概率.n <= 50000,数小于等于n. 莫队算法裸题. 莫队算法:将序列分为根号n段,将询问排序,以L所在的块为第一关键 ...
- JDK源码(1.7) -- java.util.ListIterator<E>
java.util.ListIterator<E> 源码分析(JDK1.7) ------------------------------------------------------- ...
- wampserver -- 解决Exception Exception in module wampmanager.exe at 000F15A0
Learn from: http://hi.baidu.com/spt_form/item/4b4533476c3b92a6de2a9f78 系统:windows2003 32bit wampserv ...
- python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheetahcherrypy:一个WEB frameworkctype ...
- windows server 2008 r2， 每隔一段时间自动关机
前段时间在做Exchange 2010测试的时候,由于windows server 2008 r2试用过期,开机后二个小时就会自动关机,可是我又不想重装系统,加为那样我可能需要重装好多东西,包括 ...