Question

我想要实现这个简单的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方式呢？

Answer 1

您可以让按钮在范围内设置一个值，然后使用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文档：

如果表达式求值为一个对象，则为每个键值对对于具有真值的对象，相应的键用作a 班级名称。

Answer 2

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>

如何在AngularJS上使用不同的元素添加类和removeClass？

2 个答案: