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

【问题标题】：angularJS how to calculation for ng-repeat data shown in input elementangularJS如何计算输入元素中显示的ng-repeat数据
【发布时间】：2018-07-29 05:29:31
【问题描述】：

我使用 ng-repeat 在<tables>（第一个表）中显示了items=[]; 的 JSON 数据。然后，用户可以使用 push() 函数使用 ng-repeat $index 将此行添加到另一个数组 itemsPOS=[]，然后使用 ng-repeat 将该数组显示在另一个 <table>（第二个表）中。所以itemsPOS=[]的数据会显示在item#, itemDescription, price等输入字段中。在那之后我想做什么，我添加了字段qty，discount 和Total 如果我尝试将值放入 qty，它将重新计算 Total 就像这个 plunker ：http://plnkr.co/edit/R3LON9?p=preview。但在我的版本中，它在一个表格中。

我现在面临的是，如果我为 itemsPOS=[] 添加了两行，如果我编辑第一行 qty，它会计算第二行总计。 **就像下图一样**

我的代码将物品放在 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;

总计

的计算代码

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

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

更新 第一张桌子

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

第二张桌子

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

【问题讨论】：

你也可以分享 HTML 代码吗？

标签： arrays angularjs data-binding angularjs-ng-repeat

【解决方案1】：

$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;

【讨论】：

【解决方案2】：

您可以将“它”发送到 passItem 函数中

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

在js函数中：

$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;

【讨论】：

【解决方案3】：

这可以通过更改changeQty方法的签名来实现

来自

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

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

到

/*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;
    });
}

【讨论】：

【解决方案4】：

其他人已经给出了很多解决方案，所以我将在这里指出你的错误。

如屏幕截图所示，每行都有一个总金额，因此将多个总金额分配到单个变量 $scope.totalAmount 会产生问题。与$scope.presyo相同。

解决此问题的一种简单方法是将所有变量分配到它们各自的行对象中，这样每一行就可以有自己的总量。

每个输入的ng-model 也应绑定到行对象，因此更改数量 1 行不会更新其他行的数量。

还有一个改进，您可以只在其他函数中传递整个项目而不是索引。

// 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;

【讨论】：

【解决方案5】：

您可以尝试下面的代码，也可以查看此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;
  }

【讨论】：

【解决方案6】：

您必须传递整行，而不是将 qnty 传递给 changeQty 函数。只需将ng-repeat 中使用的索引变量放在参数中，这样您就可以编辑该特定行中的任何列。

例如，考虑示例代码，

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

【讨论】：

然后呢？我在控制器中做什么？
在控制器中，您需要在项目列表中找到一个项目，然后您需要更新该项目。为此，您需要有一个唯一键来标识该项目，该键间接说明该项目在项目列表中的位置。

【解决方案7】：

不确定我是否理解你的情况，但这里有一个 JsFiddle 试图问你的问题：Working example。希望对您有所帮助。

您可以将整个集合和修改后的项目传递给 onChange 函数，然后通过其 id 找到元素并执行您的操作（计算总数）。仅传递元素索引也是如此。

这只是一个例子，您可以通过几种方式做到这一点。

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

【讨论】：

【解决方案8】：

当ng-repeat 与过滤器一起使用时，$index 与预期不同。

在您的情况下，您正在使用带有ng-repeat 的搜索过滤器。因此，当从列表/表中过滤项目时，$index 也会根据新过滤的列表进行更改。

您可以使用ng-hide 的解决方法，其中行将被隐藏但$index 将被保留，或者您可以将一些独特的或完整的单个对象传递给函数而不是$index。

【讨论】：