转载: https://blog.csdn.net/m0_37885651/article/details/79819628
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style type="text/css">
.red{
width: 400px;
height: 80px;
background: red;
}
.green{
width: 400px;
height: 80px;
background: green;
}
.blue{
width: 400px;
height: 80px;
background: blue;
}
.btn{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="testCtr">
<!--1.直接加变量 这个没什么用,了解就可以-->
<div ng-class="oneClass">寂寞来了怎么办</div>
<button type="button" class="btn" ng-click="changeClass1()">改变样式1</button>
<!--2.根据变量的布尔值 判断 改变class-->
<div ng-class="{'red':num,'green':!num}">寂寞来了怎么办</div>
<button type="button" class="btn" ng-click="changeClass2()">改变样式2</button>
<!--3.常用,根据变量的值,值自定义,实现class改变-->
<div ng-class="{1:'red',2:'green',3:'blue'}[stateNum]">寂寞来了怎么办</div>
<button type="button" class="btn" ng-click="changeClass3()">红色</button>
<button type="button" class="btn" ng-click="changeClass4()">绿色</button>
<button type="button" class="btn" ng-click="changeClass5()">蓝色</button>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('testCtr',function($scope){
//初始定义变量
//1.
$scope.oneClass = 'red';
$scope.changeClass1 = function(){
$scope.oneClass = 'green';
}
//初始定义变量
//2.
$scope.num = true;
$scope.changeClass2 = function(){
$scope.num = !$scope.num;
}
//初始定义变量
//3.ng-class多条件状态值判断
$scope.stateNum = 1;
$scope.changeClass3 = function(){
$scope.stateNum = 1;
}
$scope.changeClass4 = function(){
$scope.stateNum = 2;
}
$scope.changeClass5 = function(){
$scope.stateNum = 3;
}
})
</script>
</html>