AngularJS plus/minus toggle

Issue

What is the best way to add plus/minus toggle on number input field when using ng-repeat

I tried like this but it doesn't work:

<div ng-repeat="item in PC.Items">
  <button ng-click="PC.minus()" class='btn btn-default'>-</button>
            <input ng-model="item.Quantity"
                    type='number'
                    name='Quantity'/>
            <button class='btn btn-default' ng-click="PC.plus()">+</button>
</div>

       vm.plus = function() {
            vm.Quantity++;
            console.log(vm.Quantity);
        };
        vm.minus = function() {
            vm.Quantity--;
        };

Thnx :)

Solution

Your plus & minus buttons should only affect the current item they assigned to, not all the other items. To do so, pass the item instance to the plus and minus functions - because objects are passed as reference, the object data will be changed directly.

HTML:

<div ng-repeat="item in PC.Items">
    <button ng-click="PC.minus(item)" class="btn btn-default">-</button>
    <input ng-model="item.Quantity" type="number" name="Quantity"/>
    <button class="btn btn-default" ng-click="PC.plus(item)">+</button>
</div>

JS:

vm.plus = function(item) {
    item.Quantity++;
};
vm.minus = function(item) {
    item.Quantity--;
};

Answered By - Ron Dadon