如何使用 Angular 过滤器按球队对球员进行分组和显示？

使用角度过滤器对数据进行分组

问题：我有一个属于不同球队的球员列表。如何使用 Angular 过滤器按球队对球员进行分组和显示？

示例数据：

[{name: 'Gene', team: 'alpha'},
 {name: 'George', team: 'beta'},
 {name: 'Steve', team: 'gamma'},
 {name: 'Paula', team: 'beta'},
 {name: 'Scruath', team: 'gamma'}]

期望结果：

- team alpha
  - Gene
- team beta
  - George
  - Paula
- team gamma
  - Steve
  - Scruath

答案：要实现此分组，您可以使用 angular.filter 模块中的 groupBy 过滤器。

JavaScript:

$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'">
  <li>Group name: {{ key }}</li>
  <ul>
    <li ng-repeat="player in value">
      Player: {{ player.name }}
    </li>
  </ul>
</ul>

输出：

- Group name: alpha
  - Player: Gene
- Group name: beta
  - Player: George
  - Player: Paula
- Group name: gamma
  - Player: Steve
  - Player: Scruath

注：

• 请记住在模块的依赖项中包含 angular.filter。
• 有关 angular.filter 的更多信息，请参阅外部资源，例如 jsbin.com。

以上是如何使用 Angular 过滤器按球队对球员进行分组和显示？的详细内容。更多信息请关注PHP中文网其他相关文章！