How can I toggle classes on several elements individually with ng-click?
In this question https://stackoverflow.com/a/22072110/2169327 toggling classes with a click was done like this:
CSS:
.red { color: red; }
JS:
$scope.toggle = false;
HTML:
<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>
But what if I have several buttons that each should toggle its own class with ng-click?
If I set it up in this way:
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>
Both buttons get toggled if I press one.
I know a workaround is to define an own ng-click event for each button (f.ex toggle1 for button1, toggle2 for button2) - but is this the best way?
I made simple directive for testing:
module.directive('toggleClass', function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function() { element.toggleClass(attrs.toggleClass); }); } }; });
so you can make any element toggle class you need
<button id="btn" toggle-class="active">Change Class</button> <div toggle-class="whatever"></div>
Depending on your requirements, you may be able to use an ng-repeat
with an array representing the toggles. For example:
Your view:
<div ng-repeat="toggle in toggles"> <button id="btn" ng-click="toggle.state = !toggle.state" ng-class="{'red' : toggle.state}">Change Class</button> </div>
Inside your controller:
$scope.toggles = [{ state: true }, { state: false }, { state: true }];
This way you can expand on your button set by simply updating the array, or the internal array objects (should you need more complexity).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With