How to sum in each row the values of before rows in specific column?

Question

I've simulated my problem in this fiddle.

I have this HTML:

<table ng-app='Payments'>
    <thead>
        <tr>
            <th>Date</th>   <th>Cash</th>   <th>Total</th>
        </tr>
    </thead>
    <tbody ng-controller='paymentsController'>
        <tr ng-repeat='pay in payments | orderBy : "date"'>
            <td>{{pay.date}}</td>
            <td><input type="textbox" ng-model="pay.cash"/></td>
            <td></td>
        </tr>
    </tbody>
</table

And this JS:

var appModule = angular.module('Payments', []);

appModule.controller('paymentsController', function($scope) {
    $scope.payments = [
        {'id' : '1', 'date' : '2015-07-27', 'cash' : '149.98'},
        {'id' : '2', 'date' : '2015-07-29', 'cash' : '70.00'},
        {'id' : '3', 'date' : '2015-07-27', 'cash' : '129.99'},
        {'id' : '4', 'date' : '2015-07-28', 'cash' : '349.90'}
    ];
});

How do I fill the third column with Angular?

The third column should be initially:

149.98       // due to   0.00 + 149.98
279.97       // due to 149.98 + 129.99
629.87       // due to 279.97 + 349.90
699.87       // due to 629.87 +  70.00

Then, ng-model should do the trick to update them automatically later.

Thanks in advance.

Preston Van Loon · Accepted Answer · 2015-07-31 20:01:41Z

2

You could add a function to the scope to calculate the total at that index. You have to keep in mind that you are using order by which means you should us the as syntax to calculate the value from the ordered list.

CalculatePay function:

$scope.calculatePay = function(index) {
  var sum = 0;
  for(var i = 0; i <= index; i++) {
    sum += parseFloat($scope.orderedList[i].cash);
  }
  return sum;
};

html:

<table ng-app='Payments'>
    <thead>
        <tr>
            <th>Date</th>   <th>Cash</th>   <th>Total</th>
        </tr>
    </thead>
    <tbody ng-controller='paymentsController'>
        <tr ng-repeat="pay in payments | orderBy: 'date' as orderedList track by pay.id">
            <td>{{pay.date}}</td>
            <td><input type="textbox" ng-model="pay.cash"/></td>
            <td>{{calculatePay($index)}}</td>
        </tr>
    </tbody>
</table>

track by is also helpful if the id is truely unique

Example: http://plnkr.co/edit/igBGY1h5RIKMNkncxhp6?p=preview

edited Jul 31, 2015 at 20:01

answered Jul 31, 2015 at 19:43

Preston Van Loon

1,0606 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4227915 Over a year ago

I was struggling here.. I updated my angular to the same you used in your plunker.. now, your answer works fine.. thank you !!

Joe Pontani · Accepted Answer · 2015-07-31 19:52:00Z

2

You would need to handle sorting in code, as the orderBy in ng-repeat creates a new list used for the display, and doesn't modify the original list. This would mean that the indexes of items in the display list don't match up with that in the original list. You'll also need a watcher on the payments collection to automatically update the totals at each position.

Something like

$scope.$watch('payments', function(newPayments) {
    $scope.payments = orderByFilter($scope.payments, "date");
    $scope.total = 0;
    angular.forEach($scope.payments, function(payment) {
        $scope.total += parseFloat(payment.cash);
        payment.total = $scope.total;
    });
}, true);

Fiddle: http://jsfiddle.net/29mh8bfe/4/

answered Jul 31, 2015 at 19:52

Joe Pontani

4514 silver badges13 bronze badges

4 Comments

Preston Van Loon Over a year ago

I would avoid adding a deep watch to the scope, this can affect performance in an application with a lot of watchers.

user4227915 Over a year ago

I don't know why.. but for me it shows orderByFilter is undefined

Joe Pontani Over a year ago

You need to inject orderByFilter into the controller.

user4227915 Over a year ago

Oh.. I see, it was that I copied from the answer, not the fiddle.. +1

Collectives™ on Stack Overflow

How to sum in each row the values of before rows in specific column?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related