Patrickkx Patrickkx - 1 month ago 22
AngularJS Question

AngularJS shopping cart app: Disable button when quantity < 2

I'm having problems with disabling the 'add' ('+') and the 'substract' ('-') buttons. It should work like:



  • quantity == 1 -> '-' button is disabled

  • quantity > 1 && quantity < 15 -> button '-' and '+' are enabled

  • quantity >= 15 -> '+' is disabled




If you have any hints to help me, please share it.

Here's jsfiddle with my whole app: https://jsfiddle.net/scgsc7or/23/

I tried to do it with jQuery
addClass
and
removeClass
but unfortunately, when I'm adding it into my
$scope.addQuantity
function, it affects ALL buttons, not only this one involved.

Thank you in advance, for every hint.

Answer

Use ng-disabled

just put your expression into the ng-disabled.

 var app = angular.module('app', []);

 app.controller('MainController', ['$scope', '$http', '$log',
   function($scope, $http, $log) {

     $scope.drinks = [];

     $scope.itemsToBuy = [];

     $scope.updateTotalPrice = function() {
       $scope.totalPrice = 0;

       if (itemsToBuy.length > 0) {
         for (var i = 0; i < $scope.itemsToBuy.length; i++) {
           $scope.totalPrice += $scope.itemsToBuy[i].price;
         }
       }
     }


     $scope.drinks = [{
       "name": "Pepsi 0.5l",
       "price": 1.49
     }, {
       "name": "Pepsi 1l",
       "price": 2.49
     }, {
       "name": "Pepsi 2l",
       "price": 3.49
     }, {
       "name": "Orange juice 0.5l",
       "price": 1.40
     }, {
       "name": "Lemon tea 1l",
       "price": 1.99
     }, {
       "name": "Cola-Cola 0.33l",
       "price": 0.89
     }, {
       "name": "Cola-Cola 0.5l",
       "price": 1.99
     }, {
       "name": "Cola-Cola 1l",
       "price": 2.99
     }, {
       "name": "Heineken 0.5l",
       "price": 1.89
     }, {
       "name": "Soda 0.5l",
       "price": 0.49
     }, {
       "name": "Tomato juice 0.5l",
       "price": 0.99
     }, {
       "name": "Grapefruit juice 0.5l",
       "price": 0.99
     }, {
       "name": "Aloe Vera drink 0.5l",
       "price": 2.99
     }, {
       "name": "Water 0.5l",
       "price": 0.29
     }];


     $scope.addToShoppingList = function(id) {
       var itemToAdd = $scope.drinks[id];
       itemToAdd.quantity = 1;
       $scope.itemsToBuy.push(itemToAdd);
       $scope.drinks.splice(id, 1);
       //localStorage.setItem("data", JSON.stringify($scope.itemsToBuy));
     };

     $scope.removeFromCart = function(id) {
       $scope.drinks.push($scope.itemsToBuy[id]);
       $scope.itemsToBuy.splice(id, 1);
     };


     $scope.itemsToBuy = [];
     //JSON.parse(localStorage.getItem("data"))

     $scope.getTotal = function() {
       var total = 0;

       if ($scope.itemsToBuy.length > 0) {
         for (var i = 0; i < $scope.itemsToBuy.length; i++) {
           var product = $scope.itemsToBuy[i];
           total += (product.price * product.quantity);
         }
       }
       return total.toFixed(2) + '$';
     };

     $scope.$watch('itemsToBuy', function() {
       $scope.totalPrice = $scope.getTotal();
     }, true);


     $scope.checkLength = function() {
       return $scope.itemsToBuy.length;
     };

     $scope.clearCart = function() {
       for (var i = 0; i < $scope.itemsToBuy.length; i++) {
         $scope.drinks.push($scope.itemsToBuy[i]);
       }
       $scope.itemsToBuy = [];
     };

     $scope.confirmOrder = function() {
       window.alert("Your order is accepted.");
     }


     $scope.addQuantity = function(id) {
       if ($scope.itemsToBuy[id].quantity < 15) {
         $scope.itemsToBuy[id].quantity++;
         angular.element('.substractBtn').prop('disabled', false);
       }
     }


     $scope.removeQuantity = function(id) {
       if ($scope.itemsToBuy[id].quantity > 0) {
         $scope.itemsToBuy[id].quantity--;
       }
     }


   }
 ]);
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  border: solid 1px black;
  height: 600px;
  width: 1000px;
  border-radius: 5px;
}
.shopList {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  min-height: 400px;
}
.itemList {
  padding: 10px;
  overflow-y: hidden;
  max-height: 600px;
}
.itemList li:hover {
  cursor: pointer;
  background-color: #ccc;
}
.hidden {
  display: none;
}
.rightPane {} .makeOrderBtn {
  margin-top: 10px;
  width: 100%;
}
.totalPriceInput {
  max-width: 45%;
}
.clearBtn {
  width: 45%;
}
[readonly] {
  background-color: white !important;
}
input:focus {
  outline: none;
}
.text {
  position: absolute;
  top: 0;
  left: 0;
}
.shopList li button {
  width: 22px
}
.shopList li .btn-danger {
  margin-left: 10px;
}
.totalQuantity {
  max-width: 40px;
  margin: 0 5px;
  padding: 0;
  height: 21.5px;
  text-align: center;
  padding-right: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div ng-app='app' class="container">

  <div class="content" ng-controller="MainController">


    <div class="col-xs-6">
      <ul class="list-group itemList">
        <li class="list-group-item" ng-hide="product.isHidden" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)">
          <strong>{{ product.name }}</strong> - {{ product.price | currency }}
        </li>
      </ul>
    </div>

    <div class="col-xs-6 rightPane">
      <div class="col-xs-12">
        <ul class="list-group shopList">
          <li class="list-group-item" ng-repeat="(id, product) in itemsToBuy">
            <strong>{{ product.name }}</strong> - {{ product.price | currency }}
            <button ng-click="removeFromCart(id)" class="btn btn-xs btn-danger pull-right">X</button>
            <button ng-click="addQuantity(id)" ng-disabled=" product.quantity>=15" class="btn btn-xs btn-info pull-right addBtn">
              +
            </button>

            <input readonly type="text" value="{{ product.quantity }}" class="form-control totalQuantity pull-right"></input>

            <button ng-click="removeQuantity(id)" ng-disabled="product.quantity==1" class="btn btn-xs btn-info pull-right substractBtn">-
            </button>
          </li>
        </ul>
      </div>

      <button class="btn btn-danger clearBtn" ng-disabled="!checkLength()" ng-click="clearCart()">Clear the cart
      </button>
      <input readonly ng-show="!checkLength()" type="text" placeholder="Total price" class="form-control totalPriceInput pull-right"></input>
      <input readonly ng-show="checkLength()" type="text" value="{{ totalPrice }}" class="form-control totalPriceInput pull-right"></input>
      <button class="btn btn-success makeOrderBtn" ng-disabled="!checkLength()" ng-click="confirmOrder(); clearCart()">Submit your order
      </button>


    </div>


  </div>

</div>

check out this fiddle https://jsfiddle.net/scgsc7or/24/

Comments