Focus on selecting just one button within Angular

Question

Focus on selecting just one button within Angular

By retrieving values from a database and displaying them using ng-repeat within a div:

<div ng-controller = "myTest">
    <div ng-repeat="name in names">
        <h4>{{name.name}}</h4>
            <button ng-class="{'active': isActive}" ng-click="test()" >me</button>
    </div>
</div>

In the controller, there is:

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

A class called isActive is defined in the CSS file which is added or removed upon clicking the button. Due to the ng-repeat, 5 result divs are created along with 5 buttons (one for each div). The issue arises when all 5 buttons receive the class change instead of just the clicked one. To achieve the desired behavior, only the clicked button should have the class applied/removed. How can this be resolved?

javascript angularjs ng-class

Answer 1

Answer №1

If you're looking to achieve a similar effect, you might consider implementing the following code snippet:

<div ng-controller="myTest">
    <div ng-repeat="name in names">
        <h4>{{name.name}}</h4>
        <button ng-class="{ active : name.isActive }"
                ng-click="name.isActive = !name.isActive">me</button>
    </div>
</div>

Feel free to give it a try and see if it meets your needs.

Answer 2

If you're looking to achieve a similar effect, you might consider implementing the following code snippet:

<div ng-controller="myTest">
    <div ng-repeat="name in names">
        <h4>{{name.name}}</h4>
        <button ng-class="{ active : name.isActive }"
                ng-click="name.isActive = !name.isActive">me</button>
    </div>
</div>

Feel free to give it a try and see if it meets your needs.

Answer 3

Answer №2

To effectively manage the status of each button, it is important to keep track of their individual states.

One approach is to pass a unique identifier, such as the name or any other distinguishing factor, to your function:

<div ng-controller = "myTest">
    <div ng-repeat="name in names">
        <h4>{{name.name}}</h4>
            <button ng-class="{'active': buttons[name].isActive}" ng-click="test(name)" >me</button>
    </div>
</div>  

$scope.buttons = {};

$scope.test= function(name){
    $scope.buttons[name].isActive = !$scope.buttons[name].isActive;
}

Answer 4

To effectively manage the status of each button, it is important to keep track of their individual states.

One approach is to pass a unique identifier, such as the name or any other distinguishing factor, to your function:

<div ng-controller = "myTest">
    <div ng-repeat="name in names">
        <h4>{{name.name}}</h4>
            <button ng-class="{'active': buttons[name].isActive}" ng-click="test(name)" >me</button>
    </div>
</div>  

$scope.buttons = {};

$scope.test= function(name){
    $scope.buttons[name].isActive = !$scope.buttons[name].isActive;
}

Answer 5

Answer №3

I have devised a solution in my plunk to address this issue without altering the original array.

The updated version of your function is as follows:

  vm.test = function(buttonIndex) {
      // Remove class if same button is pressed again
      if (vm.buttonIndex === buttonIndex) {
        vm.buttonIndex = undefined;
      } else {
        vm.buttonIndex = buttonIndex;
      }

    };

Furthermore, the corresponding HTML code should be:

 <div ng-repeat="name in main.names track by $index">
    <h4>{{name.name}}</h4>
    <button ng-class="{'active': main.buttonIndex===$index}" ng-click="main.test($index)">me</button>
  </div>

Answer 6

I have devised a solution in my plunk to address this issue without altering the original array.

The updated version of your function is as follows:

  vm.test = function(buttonIndex) {
      // Remove class if same button is pressed again
      if (vm.buttonIndex === buttonIndex) {
        vm.buttonIndex = undefined;
      } else {
        vm.buttonIndex = buttonIndex;
      }

    };

Furthermore, the corresponding HTML code should be:

 <div ng-repeat="name in main.names track by $index">
    <h4>{{name.name}}</h4>
    <button ng-class="{'active': main.buttonIndex===$index}" ng-click="main.test($index)">me</button>
  </div>

Focus on selecting just one button within Angular

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to distinguish between enabled buttons using Protractor?

Unable to retrieve post data from the request body

When I scroll and update my webpage, the navigation header tends to lose its distinct features. This issue can be resolved

JavaScript: set values to elements in an array

Shuffle the setInterval function: How to consistently rewrite with random intervals?

Sorting an array of numbers using Javascript

What is the process for incorporating ejs into the source attribute of an image element?

How to deploy a node.js app using the MEAN Stack without needing to assign a domain name

Tips for updating state in response to changes in props

Error with Google Maps Display

Error: Unexpected end of input detected (Likely due to a missing closing brace)

What could be causing the delay in response times from these unpredictable APIs within the Express server?

Convert your Node.js server URL hosted on AWS Elastic Beanstalk to HTTPS

Instructions for applying a specific style to TextFields using a theme provider

Combining Mongoose OR conditions with ObjectIDs

I'm having trouble locating the documents I recently saved in my mongoose model

Collaborative session sharing between two node applications through Single Sign-On (SSO

Performing calculations within handsontable

Looking to display a single Angular component with varying data? I have a component in Angular that dynamically renders content based on the specific URL path

Utilize a variable within the res.writeHeads() method in Node.js