Question

我正在从ng-repeat调用一个函数，我希望在函数调用中计算余额，同时在angularjs中渲染ng-repeat。但问题是ng-repeat调用的功能比数组的长度多。如何获得正确的余额值以及为什么会发生这种情况？

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

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

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];
}

＆＃13;

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];
  }
});

＆＃13;

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

＆＃13;

ng-repeat函数调用返回负值

3 个答案: