總量NG重複

Question

我需要計算該tickets.number總量幫助NG-重複

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> 

我controller.js

​​

Answer 1

您也可以使用過濾器來計算總數。

的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

你可以使用ECMAScript 5 Array.prototype.map()和Array.prototype.reduce()來獲得總和。

AngularJS方法totalTickets傳遞filteredArr陣列參數作爲要在該視圖ng-repeat過濾：

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

代碼例如：

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

因爲您已經過濾了列表並且只需要計算過濾的元素，您需要預先過濾控制器中的列表。您可以使用控制器中的搜索過濾器預先過濾列表。

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

然後在你的HTML，您可以通過預過濾門票NG-重複，並使用預先計算的總。

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

Answer 4

最乾淨的解決方案涉及ngRepeat as關鍵字（https://docs.angularjs.org/api/ng/directive/ngRepeat）和作爲張貼由@ aravinthan-k中的自定義total濾波器。

• as關鍵字必須在ng-repeat的過濾堆棧中最後一個。無論您使用不同的過濾器做什麼，as別名都會有最終結果。
• total過濾器很容易在您的代碼中重複使用。

小提琴：http://jsfiddle.net/25g9hzzd/2/

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

實施例的過濾器（通過@ aravinthan-k）和所述控制器：

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