使用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应用>>
时间： 2024-08-10 17:03:00