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

Posted 2021-04-05

我使用ng-repeat在items=[];（第1表）中显示了<tables>的JSON数据。然后用户可以使用ng-repeat $index将此行添加到另一个数组itemsPOS=[]，使用push（）函数，然后使用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>

答案

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

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

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

另一答案

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

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

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

另一答案

不知道我是否理解你的情况，但这里有一个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;
        }
   });
}

另一答案

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

另一答案

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

正如您在屏幕截图中显示的那样，每行的总金额，因此将多个总金额分配到单个变量$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;

另一答案

这可以通过更改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;
    });
}

另一答案

你可以将'it'发送到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;

另一答案

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