Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah saya boleh mengumpulkan data mengikut sifat menggunakan penapis `groupBy` Angular?

Bagaimanakah saya boleh mengumpulkan data mengikut sifat menggunakan penapis `groupBy` Angular?

Linda Hamilton
Linda Hamiltonasal
2024-11-17 12:21:02665semak imbas

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

Mengumpulkan Data dengan Penapis Sudut

Dalam aplikasi Sudut, pengumpulan data ialah tugas biasa untuk mengatur set data yang besar. Menggunakan penapis groupBy, anda boleh mengumpulkan data anda dengan mudah mengikut sifat tertentu dan memaparkannya secara berstruktur.

Masalah:

Bayangkan anda mempunyai pelbagai pemain , masing-masing mempunyai sifat "pasukan". Anda ingin memaparkan senarai pemain yang dikumpulkan mengikut pasukan mereka.

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

Keputusan yang Diingini:

team alpha
 - Gene

team beta
 - George
 - Paula

team gamma
 - Steve
 - Scruath

Penyelesaian:

$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>

Penapis groupBy mengambil nama sifat dan mengumpulkan elemen tatasusunan mengikut sifat tersebut. Dalam kod di atas, pemain dikumpulkan mengikut harta pasukan mereka.

NOTA:

Untuk menggunakan penapis groupBy, anda mesti memasukkan kebergantungan angular.filter dalam anda modul dan pastikan fail angular-filter.js dimuatkan dalam aplikasi anda.

Penapis berkuasa ini membolehkan anda mengatur dan memaparkan data dengan mudah dalam aplikasi Angular anda, memberikan pengalaman pengguna yang berstruktur dan intuitif.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengumpulkan data mengikut sifat menggunakan penapis `groupBy` Angular?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn