问题描述:

I have a table with multiple fields:

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

At the end of ng-repeat i want a row with sum of all the rows for each column.

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

This is working for sum but the problem is: I have a filter option also using ng-option for pubid, device, seller and when I select a filter, the rows get updated in table but the sum row is not getting update.

Please help me to get the dynamic sum based on the rows visible.

网友答案:

Look this:

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

1- Use this for get itens filtered:

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

2- After create custom filter for 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>
相关阅读:
Top