AngularJS how to calculate for ng duplicate data shown in input element

Question

I have JSON data items=[];displayed in <tables>(1st table) using ng-repeat. Then the user can add this row using ng-repeat $indexto another array itemsPOS=[]using the push () function, this array is then displayed in another <table>(second table) using ng-repeat. Thus, data is itemsPOS=[]displayed in input fields such as item#, itemDescription, price. What I try to do after this, I added the fields qty, discountand TotalWhat if I try to put the values ​​in qty, it will recount exactly like this plunker: http://plnkr.co/edit/R3LON9?p=preview . But according to my version, this is in the table. Total

Now I am facing, if I added two lines for itemsPOS=[], if I edit the 1st row qty, it calculates the 2nd row of Total. ** Also like the image below **

My code is to put items in 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 calculating Total

$scope.changeQty = function(qty) {
    $scope.qnty = qty;

    if($scope.qnty>0){
        $scope.totalAmount = $scope.presyo*$scope.qnty;
    }
    console.log($scope.totalAmount)
}

UPDATE First 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>

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

Answer 1

Instead of passing the qntyto function, changeQtyyou need to pass the entire string. Just put the indexing variable used in ng-repeatin the argument so that you can edit any column on that particular row.

For example, consider a code example,

 <div ng-repeat="x in records">
    <button ng-click="changeQty(x)">
 </div>

Answer 2

ng-repeat , $index .

ng-repeat. , /, $index .

ng-hide, , $index , - $index.

Answer 3

, , JsFiddle : . , .

onChange, ( ). , .

, .

$scope.onChange = function(collection, item){
    collection.forEach(function(prod){
        if(prod.id === item.id){
            prod.total = prod.qty * prod.price;
        }
   });
}

Answer 4

, plunker .

:

       <tr ng-repeat="so in itemForPOS">
          <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}}</td>
          <td>{{so.name}}</td>
          <td><a><input type="number" value="{{so.price}}" style="text-align: center; border: 0;width: 100px" ></a></td>
          <td><a><input type="number" ng-model="so.qty" ng-change="changeQty(so)" placeholder="0" style="text-align: center; border: 0;width: 100px"></a></td>
          <td><a><input type="number" ng-model="so.dscnt" style="text-align: center; border: 0;width: 100px" placeholder="0"></a></td>
          <td><a><input type="number" ng-model="so.subTotal" style="text-align: center; border: 0;width: 100px" placeholder="0"></a></td>
        </tr> 

:

$scope.changeQty = function(item) { 
    if(item.qty>0){
        item.subTotal = parseInt(item.price*item.qty);
    }
    getTotal();
  };
  function getTotal(){
    var tot=0;
    for (var i = 0; i < $scope.itemForPOS.length; i++) {
      tot = tot + $scope.itemForPOS[i].subTotal;
    }
    $scope.totalAmount= tot;
  }

Answer 5

, , .

, , $scope.totalAmount . $scope.presyo.

, .

ng-model for each input, it must also be bound to a row object as well, therefore changing the quantity of 1 row will not update the quantity in other rows.

And improvement, you can pass the whole element instead of the index only in another function.

// instead of
$scope.passItem = function(index) {
  var itemNu = $scope.itemLoad[index].itemNo;
  var descrptn = $scope.itemLoad[index].desc;
  var cashPrice = $scope.itemLoad[index].cash;

// do this
$scope.passItem = function(item) {
  var itemNu = item.itemNo;
  var descrptn = item.desc;
  var cashPrice = item.cash;

Answer 6

This can be achieved by changing the signature of the changeQty method.

FROM

$scope.changeQty = function(qty) {
    $scope.qnty = qty;

    if($scope.qnty>0){
        $scope.totalAmount = $scope.presyo*$scope.qnty;
    }
    console.log($scope.totalAmount) }

FROM

/*The new method now works on the item that is edited and not just the quantity. This method will execute after the ng-model for the control is updated. Hence, item.qty will contain the updated quantity.*/
$scope.changeQty = function(item) {
    // This step is not necessary
    // $scope.qnty = qty;

    if(item.qty>0){
        item.subTotal = item.price*item.qty;
    } else {
        // @TODO Write code to remove item from the itemsPOS
    }
    // Now we can recaculate the total
    reCalculateTotal();
    // console.log($scope.totalAmount)
}
function reCalculateTotal() {
    $scope.counter = $scope.itemsPOS.length;
    $scope.totalAmount = 0;
    $scope.itemsPOS.forEach(function(item){
        $scope.totalAmount += item.subTotal;
    });
}

Answer 7

you can send 'it' to passItem function

<button type="button" ng-click="passItem(it)"><i class="fa fa-plus-circle"></i> Add</button>

and in js funcation:

$scope.passItem = function(item) {
var itemNu = item.itemNo;
var descrptn = item.desc;
var cashPrice = item.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;

Answer 8

$scope.passItem = function(index) {
var seletectedItem = JSON.parse(JSON.stringify($scope.itemLoad[index]));
var itemNu = seletectedItem.itemNo;
var descrptn = seletectedItem.desc;
var cashPrice = seletectedItem.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;