I have JSON data of items=[];
displayed in <tables>
(1st table) using ng-repeat. The user then can add this row using the ng-repeat $index
to another array itemsPOS=[]
by using push() function, this array then is displayed in another <table>
(2nd table) using ng-repeat. So of itemsPOS=[]
data are displayed in input fields such as item#, itemDescription, price
. What am I trying to do after that, I added fields qty
, discount
and Total
That if I try putting values in qty, it will recalculate the Total
just like this plunker: http://plnkr.co/edit/R3LON9?p=preview. But on my version, it's in a table.
What I am facing now is if I added two rows for itemsPOS=[]
, if I edit the 1st-row qty
, it calculates the 2nd row Total. **Just like image below **
My Code to put items at itemsPOS=[];
$scope.passItem = function(index) {
var itemNu = $scope.itemLoad[index].itemNo;
var descrptn = $scope.itemLoad[index].desc;
var cashPrice = $scope.itemLoad[index].cash;
var qty = 1;
var totalSum = cashPrice*qty;
console.log(totalSum)
$scope.presyo = cashPrice;
$scope.itemsPOS.push({'code':itemNu, 'name':descrptn, 'price': cashPrice, 'qty': qty, 'dscnt': 0, 'subTotal': totalSum});
console.log($scope.itemsPOS)
$scope.counter = $scope.itemsPOS.length;
Code for calculation of Total
$scope.changeQty = function(qty) {
$scope.qnty = qty;
if($scope.qnty>0){
$scope.totalAmount = $scope.presyo*$scope.qnty;
}
console.log($scope.totalAmount)
}
UPDATE The 1st table
<tbody>
<tr dir-paginate="it in itemLoad|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
<td><button type="button" class="btn btn-primary btn-sm" title="Add to POS tab" ng-click="passItem($index)"><i class="fa fa-plus-circle"></i> Add</button></td>
<td><a href="#">{{it.itemNo | ifEmpty: 'Item No.'}}</a></td>
<td>{{it.desc | ifEmpty: 'Item Name.'}}</td>
<td>{{it.Available | ifEmpty: '0'}}</td>
<td>{{it.OnOrder | ifEmpty: '0'}}</td>
<td>₱{{it.cash|currency:''| ifEmpty: '0.00'}}</td>
<td>₱{{it.charge|currency:''| ifEmpty: '0.00'}}</td>
<td>₱{{it.str|currency:''| ifEmpty: '0.00.'}}</td>
<td>₱{{it.ins|currency:''| ifEmpty: '0.00'}}</td>
</tr>
</tbody>
2nd table
<tbody>
<tr ng-repeat="so in itemForPOS|filter:search">
<td><button type="button" class="btn btn-danger btn-sm" title="Add to POS tab" ng-click="remItem($index)"><i class="fa fa-times-circle-o"></i> remove</button></td>
<td>{{so.code | ifEmpty: 'Item No.'}}</td>
<td>{{so.name | ifEmpty: 'Item Name.'}}</td>
<td><a><input type="text" value="{{so.price|currency:'₱'}}" style="text-align: center; border: 0;width: 100px" ></a></td>
<td><a><input type="text" ng-validate="integer" ng-model="qty" ng-change="changeQty(qty)" placeholder="0" style="text-align: center; border: 0;width: 100px"></a></td>
<td><a><input type="text" ng-validate="integer" ng-model="dscnt" style="text-align: center; border: 0;width: 100px" placeholder="0"></a></td>
<td><b>{{totalAmount|currency:'₱'}}</b></td>
</tr>
</tbody>
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the GetRowIndex function.
The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
You can use unique filter while using ng-repeat . If you use track by $index then unique won't work. ok, I used unique and its working now, thanks!
Instead of passing the qnty
to changeQty
function you have to pass the entire row. Just put the indexing variable used in ng-repeat
in the argument, so that you can edit any column in that particular row.
For Eg, consider the sample code,
<div ng-repeat="x in records">
<button ng-click="changeQty(x)">
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With