CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-click
Syed
Syed

Reputation: 16513

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

Upvotes: 1

Views: 492

Answers (3)

CozyAzure
CozyAzure

Reputation: 8478

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

Upvotes: 1

Iceman
Iceman

Reputation: 6145

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>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

This might work:

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

Upvotes: 1

Related Questions