angularjs中ng-class的使用
http://www.cnblogs.com/modou/p/5868127.html
1、方法一 通过数据的双向绑定(不推荐)
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="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="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="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>
