Search code examples
javascriptangularjsangularjs-ng-click

How to add "active" class to "this" parent on child button is clicked and toggle "active" class if button clicked again

The below given code is just working fine apart from one more thing I need.

HTML:

<div class="item" ng-repeat="cell in [0,1,2]" data-ng-class="{active:index=='{{$index}}'}">
    <button data-ng-click="activate('{{$index}}')">Activate Me</button>
</div>

Controller:

  $scope.activate= function(index){
      $scope.index=index;
  };

Here are the things what the above code doing:

  • The active class is added to parent div if the child is clicked.
  • The active class also get removed if you click another item.

The one additional function that I need is: If the same button is clicked again then remove the active class that's already added to parent div.

Solution

  • This might work:

    $scope.activate= function(index){
      if($scope.index == index)
          $scope.index = -1;
      else
          $scope.index = index;
};