在AngularJS中,可以使用ng-class
指令将类分配给DOM元素。ng-class
指令允许根据表达式的值动态地添加或移除类。
以下是一个具体的示例:
HTML:
This is a colored div
JavaScript:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.isRed = true;
$scope.isBlue = false;
$scope.toggleClass = function() {
$scope.isRed = !$scope.isRed;
$scope.isBlue = !$scope.isBlue;
}
});
CSS:
.red {
background-color: red;
}
.blue {
background-color: blue;
}
在上面的示例中, 当页面加载时, 当点击"Toggle Class"按钮时, 这样,当点击按钮时,ng-class
指令绑定到一个对象上,该对象有两个属性:isRed
和isBlue
。根据这两个属性的值,ng-class
指令将相应的类添加到isRed
为true
,因此red
类会被添加到isBlue
为false
,所以没有blue
类被添加。
toggleClass
函数会被调用,它会切换isRed
和isBlue
的值。这样,ng-class
指令会根据新的属性值重新计算类,并相应地添加或移除类。red
和blue
类之间切换,从而改变背景颜色。
相关内容