angularjs – 通过ng单击几个元素切换类

发布时间：2020-12-17 08:41:31 所属栏目：安全来源：网络整理

导读：如何通过ng-click单独切换几个元素的类？在这个问题http://stackoverflow.com/a/22072110/2169327切换类与一个点击是这样做： CSS： .red { color: red;} JS： $scope.toggle = false; HTML： button id="btn" ng-click="toggle = !toggle" ng-class="{'red

如何通过ng-click单独切换几个元素的类？

在这个问题http://stackoverflow.com/a/22072110/2169327切换类与一个点击是这样做：

CSS：

.red {
    color: red;
}

JS：

$scope.toggle = false;

HTML：

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

但是如果我有几个按钮，每个应该切换自己的类与ng单击如果怎么办？

如果我这样设置：

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点击事件(f.ex toggle1为button1，toggle2为button2) – 但这是最??好的方法吗？

我做了简单的指令测试：

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!