Total amount in ng-repeat

Question

I need help with calculating the total amount of ticket.number in this ng-repeat

HTML

<tr ng-repeat="tickets in listTickets | filter: searchText | orderBy: sortorder:reverse"> <td>{{ tickets.match }}</td> <td>{{ tickets.number }}</td> <td>{{ tickets.company }}</td> <td>{{ tickets.contact }}</td> <td>{{ tickets.mail }}</td> <td>{{ tickets.phone }}</td> <td><button class="btn btn-info" ng-click="edit(tickets._id)">Edit</button> </td> <td><button class="btn btn-danger" ng-click="delete(tickets._id)">Radera</button></td> </tr> <tr> <td colspan="8"> Total of: {{ totalTickets() }} tickets</td> </tr> 

My controller.js

  $scope.totalTickets = function(){ } 

Answer 1

You can also use a filter to calculate the total.

HTML

 <tr ng-repeat="tickets in listTickets | filter: searchText | orderBy: sortorder:reverse"> <td>{{ tickets.match }}</td> <td>{{ tickets.number }}</td> <td>{{ tickets.company }}</td> <td>{{ tickets.contact }}</td> <td>{{ tickets.mail }}</td> <td>{{ tickets.phone }}</td> <td><button class="btn btn-info" ng-click="edit(tickets._id)">Edit</button> </td> <td><button class="btn btn-danger" ng-click="delete(tickets._id)">Radera</button></td> </tr> <tr> <td colspan="8"> Total of: <span data-ng-bind="tickets.total=(listTickets | total:'number')"></span> tickets</td> </tr> 

Controller.js

 app.filter('total', function(){ return function(input, property) { var total = 0; angular.forEach(input, function(value, key) { total += parseFloat(value[property]) }); return total; } }) 

Answer 2

You can use ECMAScript 5 Array.prototype.map () and Array.prototype.reduce () to get the total amount.

AngularJS totalTickets method that passes the filteredArr array parameter when filtering in the ng-repeat view:

 $scope.totalTickets = function (filteredArr) { return filteredArr .map(function (o) { return o.number; }) .reduce(function (a, b) { return a + b; }, 0); }; 

AngularJS:

 <tr ng-repeat="tickets in listTickets | filter: searchText as filteredArr | orderBy: sortorder:reverse"> <td>{{ tickets.match }}</td> <td>{{ tickets.number }}</td> <td>{{ tickets.company }}</td> <td>{{ tickets.contact }}</td> <td>{{ tickets.mail }}</td> <td>{{ tickets.phone }}</td> <td><button class="btn btn-info" ng-click="edit(tickets._id)">Edit</button></td> <td><button class="btn btn-danger" ng-click="delete(tickets._id)">Radera</button></td> </tr> <tr> <td colspan="8"> Total of: {{ totalTickets(filteredArr) }} tickets</td> </tr> 

Code example:

 var listTickets = [{number: 1},{number: 2},{number: 3},{number: 4}], total = listTickets.map(o => o.number).reduce((a, b) => a + b, 0); console.log(total); 

Answer 3

Since you filtered the list and you only need to count the filtered items, you need to pre-filter the list in the controller. You can use the search filter in your controller to pre-filter the list.

 // Inject $filter so that it can be used in the controller function MyController($filter) { $scope.filteredTickets = []; // filter the tickets and count how many there are in the filtered list function updateTickets(searchTerm) { $scope.filteredTickets = $filter('search')($scope.listTickets, $scope.searchText); // Use Array.reduce to add up the number of tickets $scope.ticketCount = $scope.filteredTickets.reduce(function(count, ticket) { return count + ticket.number; }, 0); } // update the ticket count on initialisation updateTickets($scope.searchText); // update ticket count when search text changes $scope.$watch('searchText', function(newValue, oldValue) { if (newValue !== oldValue) { updateTickets(newValue); } }); } 

Then in your HTML you can ng-repeat through pre-filtered tickets and use the pre-calculated amount.

 <tr ng-repeat="tickets in filteredTickets | orderBy: sortorder:reverse"> ... </tr> <tr> <td>Total of {{ ticketCount }} tickets</td> </tr> 

Answer 4

The cleanest solution includes the ngRepeat as keyword ( https://docs.angularjs.org/api/ng/directive/ngRepeat ) and the custom filter total published by @aravinthan -k.

• as keyword should be the last on the filter stack in ng-repeat . No matter what you do between different filters, the as alias will have the final result.
• total filter is easy to overwrite throughout your code.

Fiddle: http://jsfiddle.net/25g9hzzd/2/

HTML example:

 <div ng-app="myapp"> <div ng-controller="Ctrl"> <h1>List</h1> <input type="text" ng-model="form.searchText"/> <ul> <li ng-repeat="item in list | filter: form.searchText as result"> {{item.title}} </li> <li>TOTAL: {{result | total:'number'}}</li> </ul> </div> </div> 

Filter example (by @ aravinthan-k) and controller:

 var app = angular.module('myapp', []); app.filter('total', function(){ return function(input, property) { var total = 0; angular.forEach(input, function(value, key) { total += parseFloat(value[property]) }); return total; } }); app.controller('Ctrl', function($scope){ $scope.form = { searchText: '' }; $scope.list = [ { title: 'A', number: 1 }, { title: 'AB', number: 2 }, { title: 'ABC', number: 3 }, { title: 'ABCD', number: 4 }, ]; });