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

Question

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?

Bill P · Accepted Answer · 2020-01-09 06:39:46Z

1

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++;
}

edited Jan 9, 2020 at 6:39

answered Jan 8, 2020 at 8:22

Bill P

3,61610 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

abhaya Over a year ago

Its not working as : Cannot read property 'countVal' of undefined ERROR

abhaya Over a year ago

Its working but as i add in my app ;function +/- is working but value is not shown in given input box though ng-model = same. What might be the cause of that sir?

Bill P Over a year ago

Hi, without a fiddle or something I can't say that is wrong with your code !

abhaya Over a year ago

I have used ng-repeat to repeat the elements and pro comes from ng-repeat;i cant seem to work it out;

Bill P Over a year ago

Can you create a jsfiddle with a reproducable example? I cannot help without seeing the code!

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related