My code is like this.
<form name="palletForm" novalidate=novalidate>
<div ng-app='myApp' ng-controller="MainCtrl">
<!--Small Package starts here -->
<div ng-repeat="prdElement in packageElement track by $index" class="package-grid">
<table class="hovertable">
<thead>
<tr>
<th>Line Quantity#</th>
<th>Ship Quantity</th>
<th>PickQuantity</th>
<th>Quantity in Plt</th>
<th>Allready Packed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = 0">
<td>{{data.LINQTY}}</td>
<td>{{data.SHPQTY}}</td>
<td>{{data.PickQty}}</td>
<td>
<input ng-model="data.newquantity" placeholder="Quantity" required=required type="number" />
</td>
<td>{{data.SHPQTY}}</td>
</tr>
<tr>
<td width="100%" colspan="4">
<button ng-show="prdElement.show" type="button" ng-click="newPackageItem( prdElement,$event)">Finish Package</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--Small Package ends here -->
</div>
angular.module('myApp', ['ui.bootstrap']);
angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
var counter = 0;
$scope.packageElement = [{
show: true,
palletClosed: false,
disableNextPallet: false,
Data: [{
"ITMLN": 100,
"ITCLS": "EPZ",
"ITEMNO": "021041029300",
"LINQTY": 1,
"SHPQTY": 0,
"PickQty": 1000,
"Qtyplt": 0,
"packed": 0
}, {
"ITMLN": 100,
"ITCLS": "EPZ",
"ITEMNO": "4901000002201",
"LINQTY": 1,
"SHPQTY": 0,
"PickQty": 2000,
"Qtyplt": 0,
"packed": 0
}]
}];
$scope.newPackageItem = function (packageElement, $event) {
var npackageElement = {};
angular.copy(packageElement, npackageElement);
counter++;
packageElement.show = false;
npackageElement.name = counter;
angular.forEach(npackageElement.Data, function (row) {
if (row.PickQty != row.newquantity || row.PickQty != 0) {
row.PickQty = row.PickQty - row.newquantity;
row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity);
}
});
npackageElement.show = true;
angular.forEach(packageElement.Data, function (row) {
row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity);
});
$scope.packageElement.push(npackageElement);
};
}]);
Inside button click I am calling a function newPackageItem I want to validate my text boxes before that function executes. textbox is number only field and required. I want to validate it in angular way. How can I achieve this?
