ng-repeat 函数调用返回负值

Question

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

这里是 plunkr

Answer 1

你可以试试这个

    <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 实例的余额。

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

Answer 2

这样就可以了。因为双花括号中的任何内容都是一个表达式，在摘要循环中至少计算一次，并且您的函数可能会被重复调用。

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

不保证通话次数

Plunker

Answer 3

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

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>

ng-repeat 函数调用返回负值

ng-repeat function call returniing negative value

angularjs

ng-repeat

angularjs-ng-repeat