Angular の `groupBy` フィルターを使用してプロパティごとにデータをグループ化するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-17 12:21:02

オリジナル

741 人が閲覧しました

How can I group data by a property using Angular's `groupBy` filter?

Angular フィルターを使用したデータのグループ化

Angular アプリケーションでは、データのグループ化は大規模なデータセットを整理するための一般的なタスクです。 groupBy フィルターを使用すると、特定のプロパティごとにデータを簡単にグループ化し、構造化された方法で表示できます。

問題:

プレーヤーの配列があると想像してください。、それぞれに「チーム」プロパティがあります。チームごとにグループ化されたプレーヤーのリストを表示したいとします。

[
  { 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

ログイン後にコピー

解決策:

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

ログイン後にコピー

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

ログイン後にコピー

groupBy フィルターはプロパティ名とグループを受け取りますそのプロパティによる配列要素。上記のコードでは、プレーヤーはチームプロパティによってグループ化されています。

注:

groupBy フィルターを使用するには、angular.filter 依存関係をモジュールを開き、angular-filter.js ファイルがアプリケーションにロードされていることを確認します。

この強力なフィルターを使用すると、簡単に整理し、 Angular アプリケーションにデータを表示し、構造化された直感的なユーザーエクスペリエンスを提供します。

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