如何使用 Angular 过滤器对数据进行分组? [英] How can I group data with an Angular filter?

问题描述

我有一个玩家列表，每个玩家都属于一个组.如何使用过滤器列出每个组的用户?

I have a list of players which belong to a group each. How can I use a filter to list the users per group?

[{name: 'Gene', team: 'team alpha'},
 {name: 'George', team: 'team beta'},
 {name: 'Steve', team: 'team gamma'},
 {name: 'Paula', team: 'team beta'},
 {name: 'Scruath of the 5th sector', team: 'team gamma'}];

我正在寻找这个结果:

• 团队 Alpha
  • 基因
  • 乔治
  • 宝拉
  • 史蒂夫
  • 第五部门的Scruath

  推荐答案

  您可以使用 angular.filter 的 groupBy 模块.
  所以你可以做这样的事情:

  You can use groupBy of angular.filter module.
  so you can do something like this:

  JS:

  $scope.players = [
    {name: 'Gene', team: 'alpha'},
    {name: 'George', team: 'beta'},
    {name: 'Steve', team: 'gamma'},
    {name: 'Paula', team: 'beta'},
    {name: 'Scruath', team: 'gamma'}
  ];
  

  HTML:

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

  结果:
  组名:alpha
  * 玩家:基因
  组名:beta
  * 球员:乔治
  * 玩家:宝拉
  组名:伽马
  * 球员:史蒂夫
  * 玩家:斯克鲁斯
  

  RESULT:
  Group name: alpha
  * player: Gene
  Group name: beta
  * player: George
  * player: Paula
  Group name: gamma
  * player: Steve
  * player: Scruath
  

  更新: jsbin 记住使用 angular.filter 的基本要求，特别注意必须将其添加到模块的依赖项中:

  UPDATE: jsbin Remember the basic requirements to use angular.filter, specifically note you must add it to your module's dependencies:

  (1) 您可以使用 4 种不同的方法安装 angular-filter:

  (1) You can install angular-filter using 4 different methods:

  1. 克隆&构建此存储库
  2. 通过 Bower:通过从终端运行 $ bower install angular-filter
  3. 通过 npm:从终端运行 $ npm install angular-filter
  4. 通过 cdnjs http://www.cdnjs.com/libraries/angular-filter

  (2) 在 index.html 中包含 angular-filter.js(或 angular-filter.min.js)，在包含 Angular 本身之后.

  (2) Include angular-filter.js (or angular-filter.min.js) in your index.html, after including Angular itself.

  (3) 将 'angular.filter' 添加到主模块的依赖项列表中.

  (3) Add 'angular.filter' to your main module's list of dependencies.

  这篇关于如何使用 Angular 过滤器对数据进行分组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！