如何将数据与角度过滤器中特定项目的计数进行分组?

时间:2016-01-25 14:34:14

标签: angularjs angularjs-ng-repeat angular-filters

我有一个属于每个组的玩家列表。如何使用过滤器列出每组用户? 我需要获得具有相应团队数量的输出

这是我的script.js

angular.module('app',['angular.filter'])
  .controller('MainController', function($scope) { 

    $scope.players = [
      {name: 'A', team: 'alpha', score: 10},
      {name: 'B', team: 'beta', score: 14},
      {name: 'C', team: 'gamma', score: 8},
      {name: 'D', team: 'beta', score: 28},
      {name: 'E', team: 'gamma', score: 7},
      {name: 'F', team: 'beta', score: 28},
      {name: 'G', team: 'beta', score: 28},
      {name: 'H', team: 'alpha', score: 10},
      {name: 'I', team: 'beta', score: 28},
      {name: 'J', team: 'gamma', score: 7},
      {name: 'K', team: 'alpha', score: 10},
      {name: 'L', team: 'gamma', score: 7},
      {name: 'M', team: 'gamma', score: 7},
    ];

 });

这是我的html文件

  <body>
     <div ng-controller="MainController"> 
       <ul ng-repeat="(key, value) in players | groupBy: 'team'">
     Group name: {{ key }}
     <li ng-repeat="player in value">
       player: {{ player.name }} 
     </li>
     <li>score: {{value | map: 'score' | sum}}</li>
       </ul>
     </div>
  </body>

我需要输出包括相应团队计数的输出

 Group name: alpha 3
 player: A
 player: H
 player: K
 score: 30

Group name: beta 5
 player: B
 player: D
    .
    .
    .
Group name: gamma 5
    .
    .
    .

alpha 3 beta 5 gamma 5是项目数

2 个答案:

答案 0 :(得分:1)

只需将组的长度添加到HTML {{ value.length }}

<body>
    <div ng-controller="MainController"> 
        <ul ng-repeat="(key, value) in players | groupBy: 'team'">
            Group name: {{ key }}  {{ value.length }} 
            <li ng-repeat="player in value">
                player: {{ player.name }} 
            </li>
            <li>score: {{value | map: 'score' | sum}}</li>
        </ul>
    </div>
</body>

答案 1 :(得分:0)

您可以在将数组绑定到模板之前按分数对数组进行分组

var groupedTeams = {};

var teams = [
  {name: 'A', team: 'alpha', score: 10},
  {name: 'B', team: 'beta', score: 14},
  {name: 'C', team: 'gamma', score: 8},
  {name: 'D', team: 'beta', score: 28},
  {name: 'E', team: 'gamma', score: 7},
  {name: 'F', team: 'beta', score: 28},
  {name: 'G', team: 'beta', score: 28},
  {name: 'H', team: 'alpha', score: 10},
  {name: 'I', team: 'beta', score: 28},
  {name: 'J', team: 'gamma', score: 7},
  {name: 'K', team: 'alpha', score: 10},
  {name: 'L', team: 'gamma', score: 7},
  {name: 'M', team: 'gamma', score: 7},
];

teams.forEach(function(team){
  if (!(team.score in groupedTeams)) {
    groupedTeams[team.score] = [];
  } 
  groupedTeams[team.score].push(team);
});

Imo最好将这种逻辑从模板中删除。