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

AngularJS - 对表中的过滤行求和

1 个答案: