我需要帮助计算此ng-repeat中的ticket.number总数
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
$scope.totalTickets = function(){
}
答案 0 :(得分:3)
您可以使用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);
答案 1 :(得分:2)
您还可以使用过滤器来计算总数。
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;
}
})
答案 2 :(得分:2)
最干净的解决方案涉及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
},
];
});
答案 3 :(得分:1)
因为您已经过滤了列表并且只需要计算过滤后的元素,所以您需要预先过滤控制器中的列表。您可以使用控制器中的搜索过滤器预先过滤列表。
// 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中,您可以通过预过滤的票证重复,并使用预先计算的总票数。
<tr ng-repeat="tickets in filteredTickets | orderBy: sortorder:reverse">
...
</tr>
<tr>
<td>Total of {{ ticketCount }} tickets</td>
</tr>