Sum total of a column with a calculated expression inside Angularjs - angularjs

Question

this is my code with angularjs:
<table ng-controller="SimulateController">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Price</th>
</tr>
</thead>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td><input ng-model="item.quantity" /></td>
<td>{{item.price}}</td>
<td>{{item.quantity * item.price}}</td>
</tr>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
And i need something like this, to obtain the sum of total price column:
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th>totalsum{{item.quantity * item.price}}</th>
</tr>
</tfoot>
How do i get this?, despite of looking for other topics, i couldnt find anything related to calculated expressions, thanks.

Answer 1

In your controller, define a function getTotal(items) that computes the total;
$scope.getTotal = function (items) {
// compute and return the total price
}
Then in the template:
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th>{{getTotal(items)}}</th> <!-- or {{getTotal(items) | currency}} -->
</tr>
</tfoot>
The function computing the total could be implemented as follows:
$scope.getTotal = function (items) {
var total = 0;
angular.forEach(items, function (item) {
if (item.quantity) {
total += item.quantity * item.price;
}
};
return total;
}
Ideally you could do that with a reduce but that's a out of topic.