在AngularJS中，使用ng-class指令可以动态地添加和删除类。但是，在某些情况下，可能需要在单击元素时通过ng-click指令添加或删除类。这篇文章介绍了如何在AngularJS中使用ng-click指令添加和删除类。
添加类
要在单击事件中添加类，只需将ng-click指令绑定到一个函数，该函数将为元素添加一个类。以下是一个示例代码片段：
<button ng-click="addClass()">Add Class</button>
<div ng-class="{ 'highlight': isHighlighted }">Highlighted element</div>在上面的代码中，我们创建了一个按钮，并将ng-click指令绑定到名为addClass()的函数。在另一个元素中，我们使用ng-class指令并将其设置为一个对象字面量，其中键是类名，值是布尔值，用于确定是否添加该类。 isHighlighted是一个在作用域中定义的变量，它的值由addClass()函数设置为true。
接下来，我们需要在控制器中定义addClass()函数：
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.isHighlighted = false;
$scope.addClass = function() {
$scope.isHighlighted = true;
};
});在上面的代码中，我们首先定义了一个名为myApp的模块和一个名为myController的控制器。在控制器中，我们为isHighlighted变量设置了初始值false，并定义了addClass()函数。该函数将isHighlighted变量设置为true，从而添加了highlight类。
现在，当用户单击“Add Class”按钮时，addClass()函数会被调用，并将isHighlighted变量设置为true。由于ng-class指令绑定到isHighlighted变量，因此highlight类将被添加到元素中。
删除类
要在点击事件中删除类，我们只需使用与添加类相同的方法，但是在函数中将isHighlighted变量设置为false。以下是示例代码片段：
<button ng-click="removeClass()">Remove Class</button>
<div ng-class="{ 'highlight': isHighlighted }">Highlighted element</div>在上面的代码中，我们创建了一个新的按钮并将ng-click指令绑定到名为removeClass()的函数。
接下来，在控制器中定义removeClass()函数：
-- -------------------- ---- -------
----------------------- ---
--------------------------- ---------------- -
-------------------- - ------
--------------- - ---------- -
-------------------- - -----
--
------------------ - ---------- -
-------------------- - ------
--
---在上面的代码中，我们添加了一个名为removeClass()的函数，它将isHighlighted变量设置为false，从而删除了highlight类。
现在，当用户单击“Remove Class”按钮时，removeClass()函数会被调用，并将isHighlighted变量设置为false。由于ng-class指令绑定到isHighlighted变量，因此highlight类将从元素中删除。
结论
在AngularJS中使用ng-click指令添加和删除类非常简单。只需将ng-click指令绑定到适当的函数并在该函数中更改变量的值即可。此外，通过使用ng-class指令可以动态地添加或删除类，具有很大的灵活性。
我们希望这篇文章对你有所帮助，并能够在实际项目中应用这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25148