在多个元素上使用ng-click切换类

Question

如何在使用 ng-click 时单独切换多个元素的类？

在这个问题中，https://dev59.com/BmEh5IYBdhLWcg3wvVp4#22072110 通过以下方式实现了点击切换类：

CSS：

.red {
    color: red;
}

JS：

$scope.toggle = false;

HTML：

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

但如果我有多个按钮，每个按钮都应该在 ng-click 中切换自己的类，该怎么办？

如果我按照这种方式设置：

HTML：

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>
<button id="btn2" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

如果我按下一个按钮，两个按钮都会被切换。

我知道一种解决方法是为每个按钮定义自己的ng-click事件（例如，为button1定义toggle1，为button2定义toggle2） - 但这是最好的方法吗？

我知道一种解决方法是为每个按钮定义自己的ng-click事件（例如，为button1定义toggle1，为button2定义toggle2）- 但这是最好的方法吗？

- bjornasm

Answer 1

我为了测试而创建了一个简单的指令：

module.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

所以您可以使任何元素切换到您需要的类

<button id="btn" toggle-class="active">Change Class</button>
<div toggle-class="whatever"></div>

- Zombi

---

你如何声明将被切换的两个类？例如，假设你有一个div：<div class="class_one">随机内容</div>，你想要将"class_one"切换为"class_two"。我看到的所有示例都将active作为被切换的类。 - zero_cool

@Jackson_Sandland 在你的情况下，我认为你想要使用 toggleClass 两次，一次用于 "class_one"，一次用于 "class_two"。所有 toggleClass 做的就是检查类是否已经存在并相应地采取行动：如果存在，则删除它，如果不存在，则添加它。 - MattSidor

@zombi 我怎样才能通过点击元素"A"来切换元素"B"的类？ - egurb

你可以像这样实现：.directive('toggleClass', function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function() { if (attrs.toggleClassOn) { var e = document.querySelectorAll(attrs.toggleClassOn); angular.element(e).toggleClass(attrs.toggleClass); } else { element.toggleClass(attrs.toggleClass); } }); } }; }) - Zombi

Answer 2

根据您的需求，您可以使用表示切换状态的数组和 ng-repeat 来实现。例如:

您的视图:

<div ng-repeat="toggle in toggles">
    <button id="btn" ng-click="toggle.state = !toggle.state" ng-class="{'red' : toggle.state}">Change Class</button>
</div>

在您的控制器内部：

$scope.toggles = [{ state: true }, { state: false }, { state: true }];

通过简单更新数组或内部数组对象（如果需要更多复杂性），您可以扩展按钮集。

- Matt Way

Answer 3

在控制器内部。

 $scope.stateToggle=false;
$scope.togglelasses=function(){
     $scope.stateToggle= !$scope.stateToggle;
}

在视图中使用 ng-class。

 <button ng-click="togglelasses()" ng-class="stateToggle? 'active ': ' '">

在您希望使用类“active”的每个元素中添加ng-class。

- rishabh