Angular : ng model array values got undefined in function on ng-click - angularjs

Question

I am trying to allow users to add quantity into text box. I have products array and each product contains its property. My service contains array list.
products = [{
id: 1,
name: 'X Product',
face: 'img/x_p.png',
available_size: 6,
color_available: 0,
sizes: ['10"', '20"', '30"'],
properties: [{size: '10"', mrp: '10$'},
{size: '20"', mrp: '15$'},
{size: '30"', mrp: '20$'}]
},
{
id: 2,
name: 'Y Product',
face: 'img/y_p.png',
available_size: 6,
color_available: 0,
sizes: ['10"', '20"', '30"'],
properties: [{size: '10"', mrp: '10$'},
{size: '20"', mrp: '15$'},
{size: '30"', mrp: '20$'}]
}]
Iterating through the products array. When user clicks on product it will display a product show page. where I am showing all the information for the product. For properties I am showing a table where user can add their quantity just after each size.
<div style="margin-bottom: 20px;">
<h4>
Product Detail
</h4>
<table>
<tbody>
<tr class="tableHeader">
<td>Size</td>
<td>MRP</td>
<td>Quantity</td>
</tr>
<tr ng-repeat="(key, property) in product.properties">
<td>{{ property['size'] }}</td>
<td>{{ property['mrp'] }}</td>
<td>
<input type="number" placeholder="QTY" ng-model="qty">
</td>
<td>
<a href="javascript:;" class="button" ng-click="addToCart(property['size'], qty)">
Add
</a>
</td>
</tr>
</tbody>
</table>
</div>
Question: So according to this table each row contains a button with name add. So after adding quantity user clicks on add button will them allow to add item in cart. here I am getting size in addToCart function but got undefined qty as it should be an array with its respective size. Though I am getting size. But I don't know how to do that.
$scope.addToCart = function(size, qty) {
alert($scope.qty)
}
I need a help.

Answer 1

var app = angular.module("MyApp", []);
app.controller("MyCtrl", function() {
this.addToCart = function(property, qty) {
property["qty"] = qty;
}
this.product = {
id: 1,
name: 'X Product',
face: 'img/x_p.png',
available_size: 6,
color_available: 0,
sizes: ['10"', '20"', '30"'],
properties: [{
size: '10"',
mrp: '10$'
}, {
size: '20"',
mrp: '15$'
}, {
size: '30"',
mrp: '20$'
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div style="margin-bottom: 20px;" ng-app="MyApp">
<div ng-controller="MyCtrl as ctrl">
<h4>
Product Detail
</h4>
<table>
<tbody>
<tr class="tableHeader">
<td>Size</td>
<td>MRP</td>
<td>Quantity</td>
</tr>
<tr ng-repeat="(key, property) in ctrl.product.properties">
<td>{{ property['size'] }}</td>
<td>{{ property['mrp'] }}</td>
<td>
<input type="number" placeholder="QTY" ng-model="qty">
</td>
<td>
<a href="javascript:;" class="button" ng-click="ctrl.addToCart(property, qty)">
Add
</a>
</td>
</tr>
</tbody>
</table>
<hr/>
{{ctrl.product.properties}}
</div>
</div>

Answer 2

I have noticed many times that the textbox won't bind to a normal scope variable like
$scope.qty
and binding it in view with ng-model="qty"
Please try using something like
$scope.qty = {
text:' '
}
and bind it as ng-model="qty.text" in the view
which will make sure that your textbox is actually bound.

Answer 3

Simple thing to fix this issue: init qty by $scope.qty = 0;