📅 最后修改于: 2023-12-03 15:23:58.284000 🧑 作者: Mango
在 AngularJS 中，可以使用 ng-class 指令轻松地切换类。ng-class 指令允许您根据表达式的值动态地添加或删除类。
以下是一个演示如何使用 AngularJS 切换类的简单示例：
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<input type="checkbox" ng-model="isChecked"> Highlight
<p ng-class="{highlight: isChecked}">This text will be highlighted.</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.isChecked = false;
});
</script>
</body>
</html>
在这个例子中，我们使用了 ng-class 指令来将一个类名动态地应用到一个元素上。在这个例子中，我们使用一个复选框来切换高亮显示文本的类名。当复选框被选中时，isChecked 模型的值将变为 true，这将导致 highlight 类被添加到 <p> 元素上。
可以看到，ng-class 指令采用一个对象作为参数，该对象的键是要添加或删除的类名，值是一个布尔表达式。如果值为 true，则添加相应的类名，否则删除类名。
除了使用布尔表达式外，我们还可以使用字符串、对象或数组来指定要添加或删除的类名。更多信息可以参考AngularJS文档。
总结一下，使用 AngularJS 切换类很简单，只需要使用 ng-class 指令即可。只需要将要添加或删除的类名作为键，将用于确定类名是否应该被应用于元素的布尔表达式作为值即可。