AngularJS - 對錶格中的過濾行進行求和

Question

基於此example我需要對已過濾用戶的年齡進行求和。這意味着，如果我有三個名字被過濾，控制器中的過濾器必須只總和這些年齡。

HTML

<div data-ng-app="app" data-ng-controller="controller"> 
<input type="text" data-ng-model="parameter" placeholder="search"> 
<p/> 
<table border="1"> 
<thead> 
    <tr> 
    <th>#</th> 
    <th>Name</th> 
    <th>Age</th> 
    </tr> 
<thead> 
<tbody> 
    <tr data-ng-repeat="user in users | filter: parameter"> 
    <td>{{$index+1}}</td> 
    <td>{{user.name}}</td> 
    <td>{{user.age}}</td> 
    </tr> 
</tbody> 
<tfoot> 
    <tr> 
     <td colspan="2">Total ages</td> 
     <td>{{users | sumByKey: 'age'}}</td> 
    </tr> 
</tfoot> 
</table> 
</div> 

angularjs

var app = angular.module("app", []); 

app.filter('sumByKey', function() { 
    return function(data, key) { 
     if (typeof(data) === 'undefined' || typeof(key) === 'undefined') { 
      return 0; 
    } 

    var sum = 0; 
    for (var i = data.length - 1; i >= 0; i--) { 
     sum += parseInt(data[i][key]); 
    } 
    return sum; 
    }; 
}); 

任何想法？

Answer 1

您可以在過濾後的數據存儲在filteredList並通過它進行計算，

<tbody> 
     <tr data-ng-repeat="user in (filteredList = (users | filter: parameter))"> 
     <td>{{$index+1}}</td> 
     <td>{{user.name}}</td> 
     <td>{{user.age}}</td> 
     </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td colspan="2">Total ages</td> 
     <td>{{filteredList | sumByKey: 'age' }}</td> 
    </tr> 
    </tfoot> 

DEMO