ng-repeat 函数调用返回负值答案

【问题标题】：ng-repeat function call returniing negative valueng-repeat 函数调用返回负值
【发布时间】：2016-03-19 13:37:06
【问题描述】：

我正在从 ng-repeat 调用一个函数，并且我希望在 ng-repeat 在 angularjs 中呈现时通过函数调用计算余额。但问题是 ng-repeat 调用该函数的次数超过了数组的长度。如何获得正确的余额值，为什么会这样？

这里是plunkr

【问题讨论】：

plunkr 不工作。
视图中的角度表达式可能被调用比 ngRepeat 迭代更多的次数。这就是摘要的工作方式。要解决此问题，请在 ngController 中移动您的函数调用，并将其绑定到范围属性。在您看来，绑定到范围属性。
试试这个plnkr.co/edit/bdWVU8Q9pVmXx6aZx2mO?p=preview
如果我在控制器中移动函数并使用范围属性，那么在 ng-repeat 的每次迭代中如何调用函数？

标签： angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

这样就可以了.. 因为用双花括号括起来的任何东西都是一个表达式，它在摘要周期中至少被评估一次，并且您的函数可能会被重复调用。

$scope.getBalance=function(item,index){
     return item.bal ? item.bal : (bal=item.bal =bal-item.amount);
}

不保证调用次数。

Plunker

【讨论】：

item deosnt 有 bal 作为其属性，那么 item.bal 是什么？
您可以像这样在运行时简单地添加属性。

【解决方案2】：

你可以试试这个

    <table border="1" ng-init="bal = 3000">
          <tr><th>Date</th><th>Name</th><th>Amount Paid</th><th>Balance</th></tr>
          <tr ng-repeat="item in services">
             <td>{{item.date | date}}</td>
             <td>{{item.service_item}}</td><td>{{item.amount}}</td>
             <td>{{ bal-item.amount }}</td>
          </tr>
    </table>

并从脚本中删除该函数。

这是有效的plunker

编辑： plunker-2 如果您想更新每个 ng-repeat 实例的余额。

这里我们使用与 onload 相同（几乎）的 ng-init。

【讨论】：

但是总费用应该在每次支付金额时被扣除..在最后一行余额应该是总费用总和（金额列）
所以如果你想初始化一次bal并在每次迭代中从相同的地方删除特定数量然后使用ng-init，我会更新plunker
喜欢ng-init 解决方案，但是有没有办法在数组更改时重新初始化？（当amounts 改变时，而不是当我们添加元素时，我猜在添加元素时会正确计算）
请原谅，但我不明白您所说的“数组更改”是什么意思，如果您想包含另一个 ng-repeat 则只需将其放入 <div ng-init="bal =3000"> 中即可。

【解决方案3】：

只需预先计算一个 balances 数组。在您的控制器中，替换

var bal=3000;
$scope.getBalance=function(item,index){
  bal=bal-item.amount;
  return bal;
}

类似：

var bal=3000;
var balances = [];
function initBalances() {
  for (var i = 0; i < $scope.services.length; i++) {
    balances[i] = ((i > 0) ? balances[i-1] : bal) - $scope.services[i].amount;
  }
}
initBalances(); // also re-run on every amount change

$scope.getBalance = function(item, index) {
  return balances[index];
}

var app = angular.module('app', []);
app.controller('TestCtrl', function($scope) {
  $scope.services = [{
    "id": 315,
    "service_item": "Test service 1",
    "date": "2015-12-05T18:30:00.000Z",
    "amount": 400,
    "balance": 0
  }, {
    "id": 316,
    "service_item": "Test service 2",
    "date": "2015-12-05T18:30:00.000Z",
    "amount": 100,
    "balance": 0
  }, {
    "id": 317,
    "service_item": "Test service 3",
    "date": "2015-12-05T18:30:00.000Z",
    "amount": 200,
    "balance": 0
  }, {
    "id": 318,
    "service_item": "Test service 4",
    "date": "2015-12-05T18:30:00.000Z",
    "amount": 400,
    "balance": 0
  }, {
    "id": 319,
    "service_item": "Test service 5",
    "date": "2015-12-05T18:30:00.000Z",
    "amount": 1000,
    "balance": 0
  }];

  var bal = 3000;
  var balances = [];
  function initBalances() {
    for (var i = 0; i < $scope.services.length; i++) {
      balances[i] = ((i > 0) ? balances[i - 1] : bal) - $scope.services[i].amount;
    }
  }
  initBalances();

  $scope.getBalance = function(item, index) {
    return balances[index];
  }
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="angularjs@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller='TestCtrl'>
  <h1>Total Charge is 3000</h1>

  <table border="1">
    <tr>
      <th>Date</th>
      <th>Name</th>
      <th>Amount Paid</th>
      <th>Balance</th>
    </tr>
    <tr ng-repeat="item in services">
      <td>{{item.date | date}}</td>
      <td>{{item.service_item}}</td>
      <td>{{item.amount}}</td>
      <td>{{ getBalance(item,$index) }}</td>
    </tr>
  </table>
</body>

</html>

【讨论】：