AngularJS: Increment input's value

Question

I have a button and an input in html:

<button ng-click="addQuantity()" class="btn btn-xs btn-info pull-right">+</button>
<input readonly type="text" value="{{ quantity || 1 }}" class="form-control totalQuantity pull-right"></input>

And the AngularJS code:

$scope.addQuantity = function(id){

}

I just want to increment the input.value (which default is 1), with every click on the button. I would to it by myself, but I don't know the most efficient way to do it.

If you have any hints for me, please share. Thank you!

Edit The id is the id from ng-repeat:

<li class="list-group-item" ng-repeat="(id, product) in itemsToBuy">

The input is added with every repeat of li element.

Edit2: There's a fiddle with whole app: https://jsfiddle.net/scgsc7or/3/

Operatorius · Accepted Answer · 2016-10-22 14:12:59Z

2

<button ng-click="addQuantity(id)" class="btn btn-xs btn-info pull-right">+</button>
<input readonly type="text" value="{{product.quantity || 1}}" class="form-control totalQuantity pull-right"/>

Pass the id which serves as an array index to identify exact product in the addQuantity.

And just simply increment the quantity. If quantity is undefined - it is equal to 1, otherwise - increment

$scope.addQuantity = function(id){
    if(!$scope.itemsToBuy[id].quantity){
       $scope.itemsToBuy[id].quantity = 1;
    }else{
        $scope.itemsToBuy[id].quantity++;
    }
}

edited Oct 22, 2016 at 14:12

answered Oct 22, 2016 at 13:52

Operatorius

3282 silver badges11 bronze badges

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

8 Comments

Patrickkx Over a year ago

I want to have access to this li(id).value. And by the way, quantity is not defined.

Operatorius Over a year ago

Ok, then leave the expression in the value. If quantity is not defined, please provide us with the data structure you are using in this case. P.S. I've updated the answer

Operatorius Over a year ago

I have updated your jsfiddle jsfiddle.net/scgsc7or/12 It also did not work because there was a missing reference to the product object. product.quantity

Patrickkx Over a year ago

Bro, is there a way to fix this that I have to click double to make it increment? I want to click once and add+1.

Operatorius Over a year ago

Updated jsfiddle.net/scgsc7or/13 At the moment, if the quantity is undefined you display 1, and when you press the button it is set to 1. I've changed that if the quantity is undefined, then it is zero. When you press the button then it is incremented by 1.

|

Richard Fazzi · Accepted Answer · 2016-10-22 13:56:10Z

1

I think you should send the product directly... like this

$scope.addQuantity = function(product){
    product.quantity += 1
}

and this would solve your problem.

answered Oct 22, 2016 at 13:56

Richard Fazzi

4513 silver badges10 bronze badges

Comments

Sajeetharan · Accepted Answer · 2016-10-22 14:00:23Z

1

Just increment the $scope variable by 1

 <li class="list-group-item" ng-repeat="product in itemsToBuy">
    <input readonly type="text" value="{{product.quantity}}" class="form-control totalQuantity pull-right">
    <button ng-click="addQuantity(product)" class="btn btn-xs btn-info pull-right">+</button>
  </li>

Controller

   $scope.addQuantity = function(item){
    item.quantity +=1;    
  };

DEMO

edited Oct 22, 2016 at 14:00

answered Oct 22, 2016 at 13:51

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

3 Comments

bto.rdz Over a year ago

I think that id means the id of the product he wants to increment

Patrickkx Over a year ago

Edited my post about the id.

Patrickkx Over a year ago

It works in your fiddle, but it doesn't increment the quantity in my app. I dont know why... take look at my app, I put link jsfiddle in my post.

Collectives™ on Stack Overflow

AngularJS: Increment input's value

3 Answers 3

8 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related