在AngularJS中使用ng-option过滤器动态获取列的总和

Question

我有一个包含多个字段的表格：

<table id="sectiona" class="table" ng-show="showsum == 'true'" ng-init="reports.total = {}">
  <thead>
    <tr>
      <th>Date</th>
      <th ng-show="groupBy.pubid == 'true' ">Pubid</th>
      <th ng-show="groupBy.sid == 'true' ">Sid</th>
      <th ng-show="groupBy.device == 'true' ">Device</th>
      <th ng-show="groupBy.seller == 'true' ">Seller</th>

      <th class="text-right" ng-show="groupBy.seller == 'false' ">Impressions</th>
      <th class="text-right">Clicks</th>
      <th class="text-right">Sales</th>
      <th class="text-right">GMV</th>
      <th class="text-right">Earnings</th>
      <th class="text-right">Earnings to Master</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="report in reports | orderBy:'_id.date.$date'" ng-show="( (groupBy.sid == 'true' && report._id.sid == data.singleSelect) || (groupBy.pubid == 'true' && report._id.pubid == data.singleSelect) || (groupBy.device == 'true' && report._id.device == data.singleSelect) || (groupBy.seller == 'true' && report._id.seller == data.singleSelect) ) || data.flag == 'true'">

      <td>{{ report._id.date.$date | date:"dd-MM-yyyy" }}</td>
      <td ng-show="groupBy.seller == 'true' ">{{ report._id.seller}}</td>
      <td ng-show="groupBy.pubid == 'true' ">{{ report._id.pubid}}</td>
      <td ng-show="groupBy.sid == 'true' ">{{ report._id.sid}}</td>
      <td ng-show="groupBy.device == 'true' ">{{ report._id.device}}</td>

      <td class="text-right" ng-show="groupBy.seller == 'false' ">{{ report.impressions | number:0 }}</td>
      <td ng-init="reports.total.clicks = reports.total.clicks + report.clicks" class="text-right">{{ report.clicks | number :0 }}</td>
      <td class="text-right">{{ report.sales | number : 0 }}</td>
      <td class="text-right">{{ report.gmv | number:0 }}</td>

      <td class="text-right">{{ report.earnings | number:0 }}</td>
      <td class="text-right" ng-repeat="info in pubsinfo" ng-show="info.pubid === user.pubProfile.pubid">
        {{ info.affshare * report.earnings | number : 0}}
      </td>
    </tr>
  </tbody>
</table>

在 ng-repeat 结束时，我想要一行包含每列所有行的总和。

ng-init="reports.total.clicks = reports.total.clicks + report.clicks" 

这适用于 sum，但问题是：我有一个过滤器选项，也将 ng-option 用于 pubid、device、seller，当我选择一个过滤器时，表中的行得到更新，但 sum 行没有得到更新.

请帮助我根据可见行获取动态总和。

Answer 1

看这个：

http://jsfiddle.net/joshkurz/Nk8qy/3/

1- 使用它来过滤：

ng-repeat='item in filtered = (items | filter:filterExpr)'

2- 为总和可见值创建自定义过滤器后

myApp.filter("sumItens", function() {
    return function(data, index) {
        var s = 0;

        angular.forEach(data, function(item, i) {
            s += item.val;
        });
        return Math.ceil(s);
    };
});

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.items = [{name: 'foo', val:3}, {name: 'bar', val:5}, {name: 'outher', val:2}, 
                    {name: 'foo', val:3}, {name: 'bar', val:5}, {name: 'outher', val:2},
                    {name: 'foo', val:3}, {name: 'bar', val:5}, {name: 'outher', val:2},
                    {name: 'foo', val:3}, {name: 'bar', val:5}, {name: 'outher', val:2}];
  
  $scope.filterOptions = ["foo", "bar", "outher"];
}

myApp.filter("sumItens", function() {
    return function(data, index) {
        var s = 0;
        if(!data || !data[0]) return soma;
        
        angular.forEach(data, function(item, i) {
            s += item.val;
        });
        return Math.ceil(s);
    };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    
    Filter: <select ng-options="item as item for item in filterOptions" ng-model="filter"></select><hr>
    <ul>
        <li ng-repeat='item in filtered = (items | filter:filter)'>{{item.name}}-{{item.val}}</li>
    </ul>
    <hr>Filtered list has {{filtered | sumItens}} items
</div>