Gesamtbetrag in ng-repeat

Question

ich mit der Berechnung der Gesamtmenge an tickets.number in diesem ng-wiederholen müssen helfen

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> 

Mein controller.js

$scope.totalTickets = function(){ 

} 

Answer 1

Sie können auch Filter verwenden, um eine Summe zu berechnen.

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

Sie kann ECMAScript 5 Array.prototype.map() und Array.prototype.reduce() verwenden, um die Gesamtsumme zu erhalten.

AngularJS Verfahren totalTickets Leiten des filteredArr Array-Parameter, wie Sie in der Ansicht sind Filterung ng-repeat:

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

AngularJS anzuzeigen:

<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-Beispiel:

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

Da Sie die Liste gefiltert haben und nur die gefilterten Elemente zählen müssen, müssen Sie die Liste im Controller filtern. Sie können den Suchfilter in Ihrem Controller verwenden, um die Liste vorab zu filtern.

// 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); 
     } 
    }); 
} 

Dann können Sie in Ihrem HTML-Code die vorgefilterten Tickets wiederholen und die vorberechnete Summe verwenden.

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

Answer 4

die sauberste Lösung beinhaltet die ngRepeat as Schlüsselwort (https://docs.angularjs.org/api/ng/directive/ngRepeat) und einen benutzerdefinierten total Filter, wie durch @ aravinthan-k geschrieben.

• as Schlüsselwort hat in dem Filterstapel in den ng-repeat letzten sein. Was auch immer Sie zwischen verschiedenen Filtern machen, das as Alias ​​wird das Endergebnis haben.
• total Filter ist einfach über den gesamten Code wiederverwendbar.

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

Beispiel HTML:

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

Beispiel Filter (von @ aravinthan-k) und die Steuerung:

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 
     }, 
    ]; 
});