How to toggle button states within an ng-repeat loop in AngularJS

Question

How to toggle button states within an ng-repeat loop in AngularJS

    <div ng-repeat="item in Items">                          
       <button ng-init="checkIfDisabled[item.name] = true" 
ng-disabled ="checkIfDisabled[item.name] ===true "></button>
                        </div>

In my project, I am working with a variable called cart that contains objects. The objective is to have the button enabled only if any of the objects in the cart variable match the item being displayed on the page.

When adding items to the cart, this code snippet was used:

 var itemname = item.name;
  $rootScope.checkIfDisabled[itemname] = false;

However, it seems this approach is not achieving the desired outcome. Is there an alternative solution?

The buttons are initially disabled but remain so even after the value changes to false.

javascript angularjs

Answer 1

Answer №1

In order to manage cart items, you should create an array to store them and then implement conditions to control their enable/disable status.

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.Items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    $scope.cartItems = [];
    $scope.addToCart = function(item) {
      $scope.cartItems.push(item);
    };
    $scope.doesExist = function(item) {
      return $scope.cartItems.indexOf(item) !== -1;
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.min.js"></script>
</head>

<body ng-controller="myController">
  <div ng-repeat="item in Items">
    <button ng-disabled="doesExist(item)" ng-bind="item" ng-click="addToCart(item)"></button>
    <br/>
    <br/>
  </div>
</body>

</html>

Answer 2

In order to manage cart items, you should create an array to store them and then implement conditions to control their enable/disable status.

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.Items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    $scope.cartItems = [];
    $scope.addToCart = function(item) {
      $scope.cartItems.push(item);
    };
    $scope.doesExist = function(item) {
      return $scope.cartItems.indexOf(item) !== -1;
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.min.js"></script>
</head>

<body ng-controller="myController">
  <div ng-repeat="item in Items">
    <button ng-disabled="doesExist(item)" ng-bind="item" ng-click="addToCart(item)"></button>
    <br/>
    <br/>
  </div>
</body>

</html>

How to toggle button states within an ng-repeat loop in AngularJS

Answer №1

Similar questions

Tips for effectively training my Neural Network

Creating an ImmutableJS Record with custom types: A step-by-step guide

Interference of setInterval with other setInterval functions

I need help figuring out how to get a horizontal scrollbar positioned at the top of a div to function properly once the content has been loaded using ajax

Share an entire /folder through an express server

Vue.js data does not exhibit reactivity

Experiencing complications when retrieving API information in my React component

The AngularJS Factory retrieves stale data after the initial API call without contacting the server and functions within a nested sticky state

Using Nest JS to create two instances of a single provider

Unable to invoke extension method on parent class in TypeScript

Deactivate a particular function key with the help of jQuery

Developing a versatile code block for handling animations within my project

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

Creating PDFs with barcodes using Node.js

Managing and Streaming Music in a Rails Application

Do we really need TypeScript project references when transpiling with Babel in an Electron project using Webpack?

Using the hide() method in jQuery will automatically reset the value

GIF Embeds with a Discord.js Bot

Content displayed in the center of a modal

Showcasing local storage data in a textarea using React hooks