Question

我需要帮助计算此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(){

 }

Answer 1

您可以使用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 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;
    }
})

Answer 3

最干净的解决方案涉及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
      },
    ];
});

Answer 4

因为您已经过滤了列表并且只需要计算过滤后的元素，所以您需要预先过滤控制器中的列表。您可以使用控制器中的搜索过滤器预先过滤列表。

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

ng-repeat的总量

4 个答案: