Angular の groupBy フィルターを使用してデータをチームごとにグループ化するにはどうすればよいですか?

Angular フィルターを使用したデータのグループ化: 包括的なガイド

データを意味のあるカテゴリにグループ化することはプログラミングにおける一般的なタスクであり、Angular は強力な機能を提供します。これを容易にするフィルタリングメカニズム。この記事では、Angular の groupBy フィルターを使用してプレーヤーのリストをチームに編成する方法を説明します。

問題:

それぞれのチームのプレーヤーのデータセットがあります。チームごとにグループ化されたプレーヤーを表示するには、このデータセットをフィルターする必要があります。

データセットの例:

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

予想される出力:

<li>team alpha
  <ul>
    <li>Gene</li>
  </ul>
</li>
<li>team beta
  <ul>
    <li>George</li>
    <li>Paula</li>
  </ul>
</li>
<li>team gamma
  <ul>
    <li>Steve</li>
    <li>Scruath</li>
  </ul>
</li>

解決策:

このグループ化を実現するために、Angular は angular.filter モジュールから groupBy フィルターを提供します。このフィルターはプロパティを引数として受け取り、キーがそのプロパティの一意の値であり、値がそのプロパティ値を共有するオブジェクトの配列であるオブジェクトを返します。

この場合、次のようにします。チームのプロパティごとにプレーヤーをグループ化します。その方法は次のとおりです。

JavaScript:

$scope.players = players; // Assign the dataset to a scope variable

HTML:

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

を組み合わせることで、 ng-repeat を使用した groupBy フィルターを使用すると、データの階層ビューを作成できます。このビューでは、各チームがリスト項目として表示され、そのチームに属するプレーヤーがネストされたリスト項目としてリストされます。結果は、グループ化されたデータが整理されてわかりやすく表現されます。

注:

angular.filter モジュールを使用するには、次のように追加する必要があります。 Angular モジュール内の依存関係。

以上がAngular の groupBy フィルターを使用してデータをチームごとにグループ化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。