angularjsngmodelangularjs-ng-disabled

Angularjs: How to disable decrement button in counter input if value=1?


I am building an app in which user have to addtocart using increment/decrement button. As value=0 i want decrement button to be disabled. I used ng-disabled as such:

 <div class="plus-minus">
     <div class="dec qtybutton" ng-click="pro.countVal = (pro.countVal-1)"
          ng-disabled="pro.countVal === 1">-</div> 
     <input type="text" name="qtybutton" class="cart-plus-minus-box"
            required ng-model="pro.countVal" >
     <div class="inc qtybutton"
          ng-click="pro.countVal=(pro.countVal+1)">+</div>
     </div>

But its not working. How can i implement such?

enter image description here


Solution

  • ng-disabled doesn't affect div elements. Generally it is more clear to put functionality into the controller using functions. There you can add validation checks etc. :

    <div class="plus-minus">
        <div class="dec qtybutton" ng-click="minus()">-</div>
        <input type="text" name="qtybutton" class="cart-plus-minus-box" required ng-model="pro.countVal">
        <div class="inc qtybutton" ng-click="plus()">+</div>
    </div>
    
    $scope.pro = {};
    $scope.pro.countVal = 0;
    
    $scope.minus = function() {
        if ($scope.pro.countVal === 0) return;
        $scope.pro.countVal--;
    }
    
    $scope.plus = function() {
        $scope.pro.countVal++;
    }