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

Asked 27/7, 2016 at 18:8 Answered 27/7, 2016 at 18:28

Solved javascript angularjs angularjs-ng-click

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.

Hookah answered 27/7, 2016 at 18:8 Comment(0)

This might work:

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

Katzir answered 27/7, 2016 at 18:18 Comment(0)

You should not pass string literals into the function. Pass the value of the $index instead:

  <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>

and in your controller, set the $scope.index to -1 if the $index is the same as your $scope.index:

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

Working plnkr: https://plnkr.co/edit/WtkWQLcPBy5rC4Q0xNck?p=preview

Scolex answered 27/7, 2016 at 18:21 Comment(0)

angular
  .module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.index = -1;
    $scope.toggle = function(index) {
      if ($scope.index == index) {
        $scope.index = -1;
      } else {
        $scope.index = index;
      }

    };
  });

.active {
  background-color: yellow;
}

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

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

</body>

</html>

Stoppage answered 27/7, 2016 at 18:28 Comment(0)

Recommended topics

Hot tags