In my HTML code, I am utilizing the ng-repeat function. When the user clicks on addBox(), a new input box is appended for adding new data:
<div class="col-md-6 col-md-offset-2">
<h5 class="over-title">Variant</h5>
<a class="btn btn-info" ng-click="addBox()" ng-hide="btnVarianthide">Add Variant</a>
</div>
This is the HTML structure:
<table>
<tbody>
<tr ng-repeat="row in product.variant.variantdetail">
<td><input type="text" ng-model="row.variant_dtl_name" required></td>
<td>
<div class="input-group">
<span class="input-group-addon">USD</span>
<input type="number" ng-model="row.variant_dtl_price" required>
</div>
</td>
<td>
<a ng-click="delVariantDetail($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<a class="btn btn-default" ng-click="addVariantDetail()">Add Variant Detail</a>
The controller functions are as follows:
$scope.addBox = function() {
$scope.variantArray = [];
$scope.product.variant = {
variantname: '',
variantdetail:[{
"variant_dtl_name": '',
"variant_dtl_price": ''
}]
}
$scope.btnVarianthide = true;
$scope.boxShow = true;
};
$scope.addVariantDetail = function() {
$scope.product.variant.variantdetail.push({
"variant_dtl_name": '',
"variant_dtl_price": ''
});
};
$scope.delVariantDetail = function($index) {
$scope.product.variant.variantdetail.splice($index,1);
if($scope.product.variant.variantdetail.length == 0) {
$scope.btnVarianthide = false;
$scope.boxShow = false;
delete $scope.product.variant;
}
};
I need to retrieve the value of row.variant_dtl_price from each newly added input box in order to track the minimum value for discount calculation. Can someone help me with this? Thanks!