Total amount in ng-repeat

Question

I need helping with calculating the total amount of tickets.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 use ECMAScript 5 Array.prototype.map() and Array.prototype.reduce() to get the total sum.

AngularJS method totalTickets passing the filteredArr array parameter as you are filtering in the view ng-repeat:

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

AngularJS view:

<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 2

You can also use filter to calculate a 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;
    }
})