kwota NG-repeat Razem

Question

Potrzebuję pomocy przy obliczaniu całkowitej ilości tickets.number w tym ng-powtórzyć

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> 

Moi controller.js

$scope.totalTickets = function(){ 

} 

Answer 1

Można również użyć filtra do obliczenia sumy.

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 można użyć ECMAScript 5 Array.prototype.map() i Array.prototype.reduce(), aby uzyskać łączną kwotę.

angularjs sposób totalTickets przechodzącej parametr filteredArr tablicy, jak jest filtrowany w widoku ng-repeat: widok

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

angularjs: Przykład

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

Kod:

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

Ponieważ filtrowałeś listę i musisz liczyć tylko przefiltrowane elementy, musisz najpierw przefiltrować listę w kontrolerze. Możesz użyć filtra wyszukiwania w swoim kontrolerze, aby wstępnie filtrować 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); 
     } 
    }); 
} 

Następnie w kodzie HTML można powtórzyć wstępnie przefiltrowane bilety i użyć obliczonej sumy.

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

Answer 4

Najczystsze rozwiązanie polega na ngRepeat as słowa kluczowego (https://docs.angularjs.org/api/ng/directive/ngRepeat) oraz niestandardową total filtr jako wysłana przez @ aravinthan-K.

• as Hasło musi być ostatnim w stosie filtra w ng-repeat. Cokolwiek robisz pomiędzy różnymi filtrami, alias as będzie miał końcowy rezultat.
• total Filtr można łatwo ponownie wykorzystać na całym kodzie.

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

Przykład 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> 

Przykład filtr (przez @ aravinthan-K) i kontroler:

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