I need the values to change by clicking the + and - buttons, as in the image.
I've taken an example in Plunker ( link ) and I'm trying to adapt to what I need, but I'm not having success. Could someone give me some tips? Here's what I have so far:
$scope.formData = [];
$scope.products = [{
'id': '1',
name: 'Festa do Cabide'
}, {
'id': '2',
name: 'Balada do Natal'
}, {
'id': '3',
name: 'Almôndegas Radiotivas'
}];
$scope.changeQuantity = function (productId, quantity) {
var newItem = true;
angular.forEach($scope.formData, function (value, index) {
console.log(value);
console.log(index);
if (value.product_id === productId) {
//remove if quantity 0 or null
if (quantity === 0 || quantity === null) {
$scope.formData.splice(index, 1);
}else {
$scope.formData[index].quantity = quantity;
}
newItem = false;
}
});
if (newItem) {
$scope.formData.push({product_id: productId, quantity: quantity});
}
};
<pre>{{ formData }}</pre>
<ul ng-repeat="product in products">
<li>{{ product.name }}</li>
<label for="">Quantity: </label>
<input type="number" ng-model="quantity" placeholder="product_{{product.id}}" value="" style="border: thin solid black">
<i class="icon ion-ios-minus-outline" mouse-down-up ng-click="clickQuantity(product.id, quantity)"></i>
<i class="icon ion-ios-plus-outline" mouse-down-up ng-click="changeQuantity(product.id, quantity)"></i>