누계 기준 누계 : 반복

Question

페이지에 동적 누적 합계를 표시하려고합니다. 필드를 채우고 추가 버튼을 클릭하면 정확한 누적 합계가있는 페이지에 페이지가 추가됩니다. 나는 두 번째와 세 번째 항목을 추가합니다. 누적 합계가 다시 올바르게 업데이트되지만 각 행의 모든 ​​누적 합계에는 총 누적 합계가 표시됩니다. 이 문제를 어떻게 해결할 수 있습니까?

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> 

Answer 1

당신은 당신의 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; 
}; 

SNIP :

angular.forEach(selectedTransactions, function(transaction, index){ 
    runningTotal += transaction.amount; 
});