CODEWITHSUNDEEP
javascriptangularjs
sim kaur
sim kaur

Reputation: 163

disable and enable button in ng-repeat

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

I have a variable called cart in which I have objects.I want the button to be enabled only if cart variable has that it in any of its objects.

while adding them to cart, I did this:

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

but this does not seem to work. Is there a work around?

Buttons are initially disabled but not getting enabled when the value changed to false.

Upvotes: 1

Views: 2382

Answers (1)

Rayon
Rayon

Reputation: 36609

You need to have an array which will hold all the cart items and later you can use conditions to enable/disable them..

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>

Upvotes: 1

Related Questions