I have two buttons and one text box I want, quantities to be increamented by 1 on click of +plus button and decremented by 1 on click of -minus button. But when it reaches to less than 0 or say 0 the decrement button should be disabled. I have this code here PLunker

My html code

<form id='myform' >
 <button ng-click="increment()"  class='qtyminus'>-</button>
    <input ng-modal="item.qty" type='text' name='quantity' value='0' class='qty' />
    <button ng-click="decrement()" >+</button>
</form>

My js code

 $scope.increment = function () {
        alert('hi');
        $scope.item.qty++;
    };
    $scope.decrement = function () {
           $scope.item.qty--;
    };

I have two buttons and one text box I want, quantities to be increamented by 1 on click of +plus button and decremented by 1 on click of -minus button. But when it reaches to less than 0 or say 0 the decrement button should be disabled. I have this code here PLunker

My html code

<form id='myform' >
 <button ng-click="increment()"  class='qtyminus'>-</button>
    <input ng-modal="item.qty" type='text' name='quantity' value='0' class='qty' />
    <button ng-click="decrement()" >+</button>
</form>

My js code

 $scope.increment = function () {
        alert('hi');
        $scope.item.qty++;
    };
    $scope.decrement = function () {
           $scope.item.qty--;
    };

• javascript
• angularjs

• are you sure that you've provided the right code in Plunker? When I click "+" for incrementing I get a "Bad request" error. And If I press "-" it alerts hi and throws the same error after that. However your question should be solved with the answer given here: stackoverflow./questions/30505010/… – Megajin Commented Aug 16, 2016 at 9:28

2 Answers 2

Use this code. This should solve your problem

<form id='myform' >
 <button ng-click="increment()"  class='qtyminus'>-</button>
    <input ng-model="item.qty" type='text' name='quantity' value='0' class='qty' />
    <button ng-click="decrement()" ng-disabled="item.qty <= 0">+</button>
</form>

• Use ng-diabled directive
• Correct ty typo @ ng-modal, it is ng-model

Note: Consider <=0 condition as user may enter <0 value in input-element

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.qty = 10;
  $scope.increment = function() {
    $scope.qty++;
  };
  $scope.decrement = function() {
    $scope.qty--;
  };
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form id='myform' ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="decrement()" class='qtyminus' ng-disabled="qty<=0">-</button>
  <input ng-model="qty" type='text' name='quantity' class='qty' />
  <button ng-click="increment()">+</button>
</form>