A method for applying the "active" class to the parent element when a child button is clicked, and toggling the "active" class if the button is clicked again

Question

A method for applying the "active" class to the parent element when a child button is clicked, and toggling the "active" class if the button is clicked again

This code is functioning properly with just one small request I have.

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

The current functionality of the above code includes:

The active class is applied to the parent div when its child is clicked.
The active class is removed if another item is clicked.

I would like to add one more feature: If the same button is clicked again, I want to remove the already added active class from the parent div.

javascript angularjs angularjs-ng-click

Answer 1

Answer №1

Give this a try:

$scope.selectItem= function(itemIndex){
      if($scope.itemIndex == itemIndex)
          $scope.itemIndex = -1;
      else
          $scope.itemIndex = itemIndex;
};

Answer 2

Give this a try:

$scope.selectItem= function(itemIndex){
      if($scope.itemIndex == itemIndex)
          $scope.itemIndex = -1;
      else
          $scope.itemIndex = itemIndex;
};

Answer 3

Answer №2

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

.active {
  color: blue;
}

<!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="index in [0,1,2]" ng-class="{'active': current == $index}">
    <button data-ng-click="toggleActive($index)">
      Click Me
    </button>
  </div>

</body>

</html>

Answer 4

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

.active {
  color: blue;
}

<!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="index in [0,1,2]" ng-class="{'active': current == $index}">
    <button data-ng-click="toggleActive($index)">
      Click Me
    </button>
  </div>

</body>

</html>

Answer 5

Answer №3

Avoid passing string literals into the function, instead pass the value of the $index:

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

In your controller, ensure that the $scope.index is set to -1 if the $index matches the current $scope.index:

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

Check out the working plnkr: https://plnkr.co/edit/WtkWQLcPBy5rC4Q0xNck?p=preview

Answer 6

Avoid passing string literals into the function, instead pass the value of the $index:

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

In your controller, ensure that the $scope.index is set to -1 if the $index matches the current $scope.index:

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

Check out the working plnkr: https://plnkr.co/edit/WtkWQLcPBy5rC4Q0xNck?p=preview

A method for applying the "active" class to the parent element when a child button is clicked, and toggling the "active" class if the button is clicked again

Answer №1

Answer №2

Answer №3

Similar questions

Updating a database on ASP.NET without the need to refresh the page

Bring in camera from gltf

What exactly happened to my buttons when I transition to the mobile display?

What is the correct way to integrate the Ant Design library with Next.js for seamless server-side rendering?

What makes ngFor unique in Angular that allows it to not require keys like in Vue and React?

Trying out a specialized validation directive in AngularJS

Ensuring Smooth Transfer: Sending Local Storage Data to MVC Controller

Locate and eliminate the item containing specific content

PHP - Issue with AJAX Login Functionality

How to extract an integer from a particular format of ID string using JavaScript

Prevent the onClick function of the outer div from being triggered by clicking on the inner div

Unveiling Insights from a JSON File: Data Extraction

Troubleshooting: Why isn't my CSS fixed position working for my sticky

Why is the jQuery class not responding to the is(:visible) selector?

The findIndex method is failing to retrieve the accurate index

How can I adhere to Angular 2's naming convention for Input and Output as suggested by the styleguide?

Nextjs: utilizing static class or employing a use function

Having trouble with charts not appearing on your Django website?

Increasing the size of elements with jQuery animate method

A step-by-step guide on generating a dynamic JSON file with JavaScript