0

ページに動的な現在の合計を表示しようとしています。フィールドに入力して追加ボタンをクリックすると、正しい現在の合計がページに追加されます。2 番目と 3 番目の項目を追加します。現在の合計は再び正しく更新されていますが、各行のすべての現在の合計は合計の現在の合計を表示しています。どうすればこれを修正できますか?

ListCtrl

angular.module('MoneybooksApp')
  .controller('ListCtrl', function ($scope) {
    $scope.transactions = [];

    $scope.addToStack = function() {
      $scope.transactions.push({
        amount: $scope.amount,
        description: $scope.description,
        datetime: $scope.datetime
      });

      $scope.amount = '';
      $scope.description = '';
      $scope.datetime = '';
    };

    $scope.getRunningTotal = function(index) {
      console.log(index);
      var runningTotal = 0;
      var selectedTransactions = $scope.transactions.slice(0, index);
      angular.forEach($scope.transactions, function(transaction, index){
        runningTotal += transaction.amount;
      });
      return runningTotal;
    };
  });

HTML

<div ng:controller="ListCtrl">
    <table class="table">
        <thead>
            <tr>
                <th></th>
                <th>Amount</th>
                <th>Description</th>
                <th>Datetime</th>
                <th></th>
            </tr>
            <tr>
                <td><button class="btn" ng:click="addToStack()"><i class="icon-plus"></i></button></td>
                <td><input type="number" name="amount" ng:model="amount" placeholder="$000.00" /></td>
                <td><input name="description" ng:model="description" /></td>
                <td><input name="datetime" ng:model="datetime" /></td>
                <td></td>
            </tr>
            <tr>
                <th>Running Total</th>
                <th>Amount</th>
                <th>Description</th>
                <th>Datetime</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng:repeat="transaction in transactions" class="{{transaction.type}}">
                <td>{{getRunningTotal($index)}} {{$index}}</td>
                <td>{{transaction.amount}}</td>
                <td>{{transaction.description}}</td>
                <td>{{transaction.datetime}}</td>
                <td><button class="btn"><i class="icon-remove"></i></button></td>
            </tr>
        </tbody>
    </table>
</div>
4

1 に答える 1

2

foreachループで変数selectedTransactionsを使用していません。foreach ループは$scope.transactionsのすべてのトランザクションを計算しています。

$scope.getRunningTotal = function(index) {
    console.log(index);
    var runningTotal = 0;
    var selectedTransactions = $scope.transactions.slice(0, index);
    angular.forEach($scope.transactions, function(transaction, index){
      runningTotal += transaction.amount;
    });
    return runningTotal;
};

をちょきちょきと切る：

angular.forEach(selectedTransactions, function(transaction, index){
    runningTotal += transaction.amount;
});
于 2013-08-31T23:38:37.813 に答える