正文
AngularJS动态设置CSS
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
使用AngularJS动态设置CSS大致有2种思路：
1、通过动态设置class名称
比如先定义2个样式：
.show-true{
display:block;
}
.show-flase{
display:none;
}
在某个元素中：
<div class="show-{{temp}}".....
temp为$scope的一个变量，通过设置$scope.temp = true 或 $scope.temp = false来决定temp变量的具体值。
比如：
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.menu-disabled-true{
color: gray;
}
.menu-disabled-false{
color: red;
}
</style>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("MyController", function($scope){
$scope.isDisabled = false;
$scope.changeState = function(){
$scope.isDisabled = true;
};
});
</script>
</head>
<body ng-controller="MyController">
<ul>
<li class="menu-disabled-{{isDisabled}}" ng-click="changeState()">hello</li>
</ul>
</body>
</html>
2、使用ng-class
ng-class显示一个对象，比如ng-class="{selected: true}"表示class="selected"。
以下ng-class的字段直接接收bool值。
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.error{
background-color: red;
}
.warning{
background-color: yellow;
}
</style>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("MyController",function($scope){
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function(){
$scope.messageText = "error";
$scope.isError = true;
$scope.isWarning = false;
};
$scope.showWarning = function(){
$scope.messageText = "warning";
$scope.isError = false;
$scope.isWarning = true;
};
});
</script>
</head>
<body ng-controller="MyController">
<div ng-class="{error:isError, warning:isWarning}">{{messageText}}</div>
<button ng-click="showError()">显示error</button>
<button ng-click="showWarning()">显示warning</button>
</body>
</html>
以下,ng-class的字段接收一个返回bool类型的表达式。
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.selected{
background-color: lightgreen;
}
</style>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("MyController",function($scope){
$scope.person =[
{name: 'darren', age: '20'},
{name: 'jack', age: '23'}
];
$scope.selectPerson = function(rowIndex){
$scope.selectedRow = rowIndex;
};
});
</script>
</head>
<body>
<table ng-controller="MyController">
<tr ng-repeat="p in person" ng-click="selectPerson($index)" ng-class="{selected: $index==selectedRow}">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
</tr>
</table>
</body>
</html>
参考资料：<<用AngularJS开发下一代Web应用>>
