Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angularJS how to calculation for ng-repeat data shown in input element

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 **

enter image description here

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>
like image 634
aintno12u Avatar asked Feb 19 '18 01:02

aintno12u


People also ask

How do I get an index value in ng-repeat?

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.

How do you use NG-repeat in a table?

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.

What can I use instead of NG-repeat?

You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

How do I remove duplicates in 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!


1 Answers

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>
like image 118
Sarang PM Avatar answered Nov 10 '22 17:11

Sarang PM