数组 – angularJS如何计算输入元素中显示的ng-repeat数据

前端之家收集整理的这篇文章主要介绍了数组 – angularJS如何计算输入元素中显示的ng-repeat数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有items = []的 JSON数据;显示在< tables>中(第1表)使用ng-repeat.然后,用户可以使用ng-repeat $index将此行添加到另一个数组itemsPOS = [],使用push()函数,然后该数组显示在另一个< table>中. (第2表)使用ng-repeat.所以itemsPOS = []数据显示在输入字段中,例如item#,itemDescription,price.在那之后我想做什么,我添加了字段数量,折扣和总计如果我尝试在qty中设置值,它将重新计算总数就像这个plunker: http://plnkr.co/edit/R3LON9?p=preview.但在我的版本中,它在一个表中.

我现在面临的是如果我为itemsPOS = []添加了两行,如果我编辑第一行数量,则计算第二行总计. **就像下图**

我的代码将项目放在itemsPOS = [];

  1. $scope.passItem = function(index) {
  2. var itemNu = $scope.itemLoad[index].itemNo;
  3. var descrptn = $scope.itemLoad[index].desc;
  4. var cashPrice = $scope.itemLoad[index].cash;
  5. var qty = 1;
  6. var totalSum = cashPrice*qty;
  7.  
  8. console.log(totalSum)
  9. $scope.presyo = cashPrice;
  10.  
  11. $scope.itemsPOS.push({'code':itemNu,'name':descrptn,'price': cashPrice,'qty': qty,'dscnt': 0,'subTotal': totalSum});
  12.  
  13. console.log($scope.itemsPOS)
  14.  
  15. $scope.counter = $scope.itemsPOS.length;

总计算代码

  1. $scope.changeQty = function(qty) {
  2. $scope.qnty = qty;
  3.  
  4. if($scope.qnty>0){
  5. $scope.totalAmount = $scope.presyo*$scope.qnty;
  6. }
  7. console.log($scope.totalAmount)
  8. }

UPDATE
第一张桌子

  1. <tbody>
  2. <tr dir-paginate="it in itemLoad|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
  3. <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>
  4. <td><a href="#">{{it.itemNo | ifEmpty: 'Item No.'}}</a></td>
  5. <td>{{it.desc | ifEmpty: 'Item Name.'}}</td>
  6. <td>{{it.Available | ifEmpty: '0'}}</td>
  7. <td>{{it.OnOrder | ifEmpty: '0'}}</td>
  8. <td>₱{{it.cash|currency:''| ifEmpty: '0.00'}}</td>
  9. <td>₱{{it.charge|currency:''| ifEmpty: '0.00'}}</td>
  10. <td>₱{{it.str|currency:''| ifEmpty: '0.00.'}}</td>
  11. <td>₱{{it.ins|currency:''| ifEmpty: '0.00'}}</td>
  12. </tr>
  13. </tbody>

第二张桌子

  1. <tbody>
  2. <tr ng-repeat="so in itemForPOS|filter:search">
  3. <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>
  4. <td>{{so.code | ifEmpty: 'Item No.'}}</td>
  5. <td>{{so.name | ifEmpty: 'Item Name.'}}</td>
  6. <td><a><input type="text" value="{{so.price|currency:'₱'}}" style="text-align: center; border: 0;width: 100px" ></a></td>
  7. <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>
  8. <td><a><input type="text" ng-validate="integer" ng-model="dscnt" style="text-align: center; border: 0;width: 100px" placeholder="0"></a></td>
  9. <td><b>{{totalAmount|currency:'₱'}}</b></td>
  10. </tr>
  11. </tbody>
@H_403_23@
而不是将qnty传递给changeQty函数,你必须传递整行.只需将ng-repeat中使用的索引变量放在参数中,以便可以编辑该特定行中的任何列.

对于Eg,请考虑示例代码,

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

猜你在找的Angularjs相关文章