2016-10-22 2 views
0

これに基づいてexampleフィルタリングされたユーザーの年齢を合計する必要があります。つまり、3つの名前がフィルタリングされている場合、コントローラのフィルタはこれらの年代だけを合計する必要があります。AngularJS - テーブルのフィルタリングされた行を合計する

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; 
    }; 
}); 

任意のアイデア?

答えて

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

関連する問題