用ng单击几个元素来切换类

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

在这个问题https://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> 

但是，如果我有几个button，每个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> 

如果我按下，则两个button都会切换。

我知道一个解决方法是为每个button定义一个自己的ng-click事件（button1的f.ex toggle1，button2的toggle2） – 但这是最​​好的方法吗？

Answer 1

我做了简单的testing指令：

 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> 

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 }]; 

这样，您可以通过更新数组或内部数组对象来扩展button集（如果需要更复杂的话）。