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

Linda Hamilton
Lepaskan: 2024-11-17 12:21:02
asal
664 orang telah melayarinya

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' },
];
Salin selepas log masuk

Keputusan yang Diingini:

team alpha
 - Gene

team beta
 - George
 - Paula

team gamma
 - Steve
 - Scruath
Salin selepas log masuk

Penyelesaian:

$scope.players = [
  { name: 'Gene', team: 'alpha' },
  { name: 'George', team: 'beta' },
  { name: 'Steve', team: 'gamma' },
  { name: 'Paula', team: 'beta' },
  { name: 'Scruath', team: 'gamma' },
];
Salin selepas log masuk
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
  <li>{{ key }}</li>
  <ul>
    <li ng-repeat="player in value">{{ player.name }}</li>
  </ul>
</ul>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan