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

Dynamically get the sum of columns with ng-option filter in AngularJS

本文关键字：动态 获取 过滤器 ng-option AngularJS      更新时间：2023-09-26

我有一个包含多个字段的表:

<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，当我选择一个过滤器，行在表中得到更新，但总和行没有得到更新。

请帮助我获得基于行可见的动态总和。

看这个:

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

1-使用这个来过滤get条目:

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

2-为sum visible values创建自定义过滤器

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>

相关文章：