通过数据的双向绑定 (一般是不推荐的)
$scope.className = "change1";
- <div class="{{className}}"></div>
- // 或者像这样
- function changeClass(){
- $scope.className = "change2";
- }
- <div class="{{className}}"></div>
通过对象数组
- function ctrl($scope) {
- $scope.isClassA = true;
- }
- <div ng-class="{true:'ClassA',false:'anotherClass'}[isClassA]"></div>
- // 当 isClassA 为 true 时, 增加 ClassA 样式; 当 isClassA 为 false 时, 增加 anotherClass 样式.
通过 key/value(推荐使用)
- function ctrl($scope) {
- $scope.isClassA = true;
- $scope.isClassB = false;
- $scope.isClassC = false;
- }
- <div ng-class="{'ClassA':isClassA,'ClassB':isClassB,'ClassC':isClassC}"></div>
- // 当 isClassA 为 true 时, 增加 ClassA 样式; 当 isClassB 为 true 时, 增加 ClassB 样式; 当 isClassC 为 true 时, 增加 ClassC 样式.
来源: http://www.bubuko.com/infodetail-2559348.html