[解決済み] Angularのフィルターでデータをグループ化するには？

質問

各グループに所属するプレイヤーのリストがあります。フィルターを使って、グループごとにユーザーを一覧表示するにはどうすればよいですか？

[{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'}];

この結果を求めています。

• チームアルファー
  • 遺伝子
• チームベータ
  • ジョージ
  • ポーラ
• チームガンマ
  • スティーブ
  • 第5セクターのスクルース

どのように解決するのか？

のgroupByを使用することができます。 angular.filter（アンギュラーフィルター モジュールを使用します。
というようなことができるようになります。

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>

RESULT:
グループ名：α
* プレイヤー ジーン
グループ名：β
* プレイヤー ジョージ
* プレイヤー ポーラ
グループ名：γ
* プレイヤー スティーブ
* プレイヤー スクルース

UPDATE jsbin を使用するための基本的な要件を覚えておきましょう。 angular.filter 特に、モジュールの依存関係に追加する必要があることに注意してください。

(1) angular-filterは4種類の方法でインストールすることができます。

1. clone & このリポジトリをビルドします。
2. Bower 経由：ターミナルから $ bower install angular-filter を実行してください。
3. npm 経由：ターミナルから $ npm install angular-filter を実行します。
4. cdnjs経由 http://www.cdnjs.com/libraries/angular-filter

(2) Angular本体をインクルードした後、index.htmlにangular-filter.js（またはangular-filter.min.js）をインクルードしてください。

(3) メインモジュールの依存関係に 'angular.filter' を追加します。