ホームページ > ウェブフロントエンド > jsチュートリアル > Angular フィルターを使用してプレーヤーをチームごとにグループ化し、表示するにはどうすればよいですか?

Angular フィルターを使用してプレーヤーをチームごとにグループ化し、表示するにはどうすればよいですか?

DDD
リリース: 2024-11-18 04:07:02
オリジナル
250 人が閲覧しました

How can I group and display players by their teams using Angular filters?

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

質問: さまざまなチームに所属するプレーヤーのリストがあります。 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 フィルターを利用できます。 module.

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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート