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 以前了解过 ...
随机推荐
- iOS 9音频应用播放音频之第一个ios9音频实例
iOS 9音频应用播放音频之第一个ios9音频实例 第一个ios9音频实例 为了让开发者可以对上面的内容有更加深入的了解,本节将实现播放音频的第一个实例.在此实例中会涉及到项目的创建.界面设计.关联以 ...
- hdu1232 畅通工程 并查集的 应用
畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- Vue 2.0学习（七）方法与事件
基本用法 以监听一个按钮的点击事件为例,设计一个计数器,每次点击都加1: <div id = "app"> 点击次数:{{ counter }} <button ...
- 【BZOJ 3727】 3727: PA2014 Final Zadanie （递推）
3727: PA2014 Final Zadanie Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 279 Solved: 121 Descript ...
- django-附件上传、media、extra、事务
1 普通上传 1.1 html <form action="/index/" method="post" enctype="multipart/ ...
- bzoj 1029 贪心
贪心的一种,维护一种尽可能优的状态(即不会比最优解差),将这种状态保持到最后. /*********************************************************** ...
- April Fools Day Contest 2016 E. Out of Controls
E. Out of Controls 题目连接: http://www.codeforces.com/contest/656/problem/E Description You are given a ...
- linux基础命令学习（四）用户与群组
一.linux用户账号的管理 linux用户账号的管理主要包括用户添加.用户删除.用户修改. 添加用户账号就是在系统创建一个新账号,然后为新账号分为用户号.用户组.主目录和登录Shell等资源. 刚添 ...
- timeago.js-时间显示插件
注意事项: 1. 时间格式 = “2018-03-02 17:13:00”时,动态获取的时间无法通过 拼接字符串的方法 添加到 dom元素的 datetime属性上,结果为 <div class ...
- 密钥登陆Linux服务器
Linux VPS/服务器的使用越来越多,Linux的安全问题也需要日渐加强.我们远程线上的服务器,通常是通过密码方式(ip+帐号+密码,可能还多一个ssh端口)登录,如果密码不够强壮,那么系统将是灰 ...