logo标签列表

Angular过滤器 - 按对象（或多个字段）分组

javascriptangularjsangular-filters
4

我通过将团队转换为对象，扩展了Angular筛选器Group by示例，如下所示。

     var app = angular.module('myApp',['angular.filter']);

app.controller('MainController', ['$scope', function($scope){
  $scope.players = [
  {
    name: 'Gene', 
    team: {
      'id' : '1',
      'name' : 'alpha'
      
    }
  },
  {
    name: 'George', 
    team: {
      'id' : '2',
      'name' : 'beta'
    }
  },
  {
    name: 'Steve', 
    team: {
      'id' : '3',
      'name' : 'gamma'
    }
  },
  {
    name: 'Paula', 
    team: {
      'id' : '2',
      'name' : 'beta'
    }
  },
  {
    name: 'Scruath', 
    team: {
      'id' : '3',
      'name' : 'gamma'
    }
  }
];
}]);


  
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="angular-filter@*" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="MainController">
      <ul>
        <li ng-repeat="(team, players) in players | groupBy: 'team.name'">
          <a href="#I need the team ID">Group name: {{ team }}</a>
          <ul>
            <li ng-repeat="player in players">
              player: {{ player.name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>

</html>

但是，如果我需要在“group by”中使用团队ID怎么办？我该怎么做？

<a href="#I need the team ID">Group name: {{ team }}</a>

我曾尝试按团队对象分组，并使用 team.name 和 team.id，但未成功。同时，我也不知道如何使用多个字段 (team.id, team.name) 进行分组。

下面是一个 可运行的示例

在使用“groupBy”之后，您可能会得到同一组名称的两个不同团队ID，这样可以吗？ - Pengyy
@Pengyy 当我按团队分组时，每个团队将会有一个ID和一个名称。而且一个团队可以拥有多名球员。 - EddyG
1
由于您的数据格式，这是不可能的。这没有意义。您按名称分组，但例如团队名称“gamma”有2个不同的ID。 - lin
我会给你一个按照 team.id 分组的解决方案，因为这样更加整洁。按照名称分组可能会因为团队名称不唯一而出现问题。 - lin
让我们在聊天中继续这个讨论。 - EddyG
显示剩余4条评论
2个回答
4
我有一个简单的解决方案： 我按照 team.id 进行了分组。
<li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">

然后我在组内使用了：players[0].team.name

<li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">
    <a href="#Here I can use the group teamid">Group name: {{ players[0].team.name }}</a>
      <ul>
        <li ng-repeat="player in players">
          player: {{ player.name }}
        </li>
     </ul>
</li>

由于每个组中的players只包括属于该组且都具有相同团队的球员，因此players[0]、players[1]等都将具有相同的团队名称。

     var app = angular.module('myApp',['angular.filter']);

app.controller('MainController', ['$scope', function($scope){
  $scope.players = [
  {
    name: 'Gene', 
    team: {
      'id' : '1',
      'name' : 'alpha'
      
    }
  },
  {
    name: 'George', 
    team: {
      'id' : '2',
      'name' : 'beta'
    }
  },
  {
    name: 'Steve', 
    team: {
      'id' : '3',
      'name' : 'gamma'
    }
  },
  {
    name: 'Paula', 
    team: {
      'id' : '2',
      'name' : 'beta'
    }
  },
  {
    name: 'Scruath', 
    team: {
      'id' : '3',
      'name' : 'gamma'
    }
  }
];
}]);


  
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="angular-filter@*" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="MainController">
      <ul>
        <li ng-repeat="(teamid, players) in players | groupBy: 'team.id'">
          <a href="#Here I can use the group teamid">Group name: {{ players[0].team.name }}</a>
          <ul>
            <li ng-repeat="player in players">
              player: {{ player.name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>

</html>

1

你应该按team.id分组，因为团队名称不是唯一的。这样可以避免错误的数据输出。好的，我能够通过在控制器中预先收集你的团队，并将它们通过team.id规范化到一个单独的对象中来解决你的问题 - 演示fiddle：

视图

<body ng-app="myApp">
<div ng-controller="MainController">
    <ul>
        <li ng-repeat="(team, players) in players | groupBy: 'team.id'">
            <a href="{{ team }} ">Group name: {{ teams[team].name }}</a>
            <ul>
                <li ng-repeat="player in players">
                    player: {{ player.name }}
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>

AngularJS 应用程序

var app = angular.module('myApp',['angular.filter']);

app.controller('MainController', ['$scope', function($scope){

    $scope.players = [
        {
            name: 'Gene',
            team: {
                'id' : '1',
                'name' : 'alpha'

            }
        }, {
            name: 'George',
            team: {
                'id' : '2',
                'name' : 'beta'
            }
        }, {
            name: 'Steve',
            team: {
                'id' : '3',
                'name' : 'gamma'
            }
        }, {
            name: 'Paula',
            team: {
                'id' : '4',
                'name' : 'beta'
            }
        }, {
            name: 'Scruath',
            team: {
                'id' : '5',
                'name' : 'gamma'
            }
        }];

    $scope.teams = {};

    $scope.players.forEach(function (player) {
        if (angular.isUndefined($scope.teams[player.team.id])) {
            $scope.teams[player.team.id] = player.team;
        }
    });
}]);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接