如何在AngularJS上添加不同元素的Class和removeClass

How to addClass and removeClass with different element on AngularJS?

本文关键字：元素 Class removeClass AngularJS 添加      更新时间：2023-09-26

我有一个想要实现的简单dom：

<header>
    <button class="open-btn></button>
</header>
<nav class="active">
    <button class="close-btn"></button>
</nav>

如何在Angular上用单独的元素实现简单的addClass和removeClass函数？

我读过服务、工厂和控制器，听起来很困惑。

我已经成功地使用Controller在同一个控制器上添加和删除类，比如说open-btn和close-btn都在nav下，但如果我使用不同的元素呢？我觉得我所做的很不对，这是正确的方式吗？我必须把它注册到服务/工厂吗？

场景：

当用户单击open-btn时，元素nav将具有active的类，如果用户单击close-btn，则nav将移除其active按钮。

使用jQuery似乎很容易做到这一点，但我该如何使用Angular方法呢？

您可以让按钮在作用域中设置一个值，然后使用ng-class:根据该元素的值为元素提供类

<header>
   <button class="open-btn" ng-click="isActive = true">Open</button>
</header>
<nav ng-class="{ 'active': isActive }">
   <button class="close-btn" ng-click="isActive = false">Close</button>
</nav>

来自ng-class文档：

如果表达式的计算结果为对象，则对于每个键值对对于具有truthy值的对象，使用相应的键作为类名。

Angular有ngClass来添加/删除类

像这个

ctrl

$scope.isOpen=false;
$scope.open=function(){
  $scope.isOpen=true;
}
$scope.close=function(){
  $scope.isOpen=false;
}

Html

<header>
    <button class="open-btn" ng-click="open()"></button>
</header>
<nav class="active" ng-class="{'active': isOpen }">
    <button class="close-btn" ng-click="close()"></button>
</nav>
相关文章：