Apply ng-class only on the element that was clicked on

Question

I want to apply the ng-class only on the button/element that was clicked on, how would I do that?

JS file:

var classApp = angular.module('classApp', []);
classApp.controller('classCtrl', function ($scope) {
    $scope.isActive = false;

    $scope.activeButton = function() { 
       $scope.isActive = !$scope.isActive;         
    }  
});

HTML file:

<div ng-app="classApp" ng-controller="classCtrl">
    <button class="button" ng-class="{'active': isActive}" ng-click="activeButton()" type="button">Click Me to Toggle Class</button> 

    <button class="button" ng-class="{'active': isActive}" ng-click="activeButton()" type="button">Click Me to Toggle Class</button> 
</div>

http://codepen.io/anon/pen/BjNyNe

A simple solution: create an array to hold status of each button. — Aetherus, Dec 09 '15 at 12:51

score 1 · Answer 1 · edited May 23 '17 at 11:52

Here is a possible solution:

The controller:

classApp.controller('classCtrl', function ($scope) {
    $scope.isActive = [false, false];

    $scope.activeButton = function (index) {     
        $scope.isActive[index] = !$scope.isActive[index];         
    }   
});

And the html:

<div ng-app="classApp" ng-controller="classCtrl">
    <button class="button" ng-class="{'active': isActive[0]}" ng-click="activeButton(0)" type="button">Click Me to Toggle Class</button> 

    <button class="button" ng-class="{'active': isActive[1]}" ng-click="activeButton(1)" type="button">Click Me to Toggle Class</button> 
</div>

EDIT: My solution works but @Shashank Agrawal solution is better and cleaner.

Hi user3632710, thank you for your answer. I like your answer more, however I want to do this without passing in the index number into my button html tags. I would ideally want to use the "this" keyword and set it to the element that was clicked on...sorry I am a newbie to AngularJS. — user1158507, Dec 09 '15 at 13:49

Shashank Agrawal · Answer 2 · 2015-12-09T12:56:58.317

Here comes the uses of Angular Directives. Instead of maintaining various variables, you can use a simple directive:

app.directive('clickActive', [function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            element.on('click', function() {
                element.toggleClass("active");
                if (attr.moreClasses) {
                    // Optionally toggle more classes if passed
                    element.toggleClass(attr.moreClasses);
                }
            });
        }
    };
}]);

HTML:

<div ng-app="classApp" ng-controller="classCtrl">
  <button class="button" click-active type="button">Click Me to Toggle Class</button> 

   <button class="button" click-active type="button">Click Me to Toggle Class</button> 
</div>

Optionally, pass more classes to toggle like:

<button class="button" click-active more-classes="foo bar" type="button">Click Me to Toggle Class</button>

Maybe `element.toggleClass("active")` would fit better? – pgrodrigues Dec 09 '15 at 12:56 — pgrodrigues, Dec 09 '15 at 12:56
Yup, changed that. Thank you @user3632710 – Shashank Agrawal Dec 09 '15 at 12:57 — Shashank Agrawal, Dec 09 '15 at 12:57

Apply ng-class only on the element that was clicked on

2 Answers2

Linked