Bagaimanakah saya boleh mengumpulkan data mengikut sifat tertentu dalam Angular?

Mengumpulkan Data Secara Berkesan dalam Sudut: Memanfaatkan kumpulanBy Filter

Dalam bidang aplikasi Sudut, mengatur dan memaparkan set data kompleks dengan cekap adalah penting. Satu pendekatan yang berkesan ialah mengumpulkan data berdasarkan kriteria tertentu, membolehkan pengguna menavigasi dan memahami maklumat dengan mudah.

Pernyataan Masalah

Andaikan anda mempunyai senarai pemain yang tergolong dalam pelbagai pasukan. Tugas anda adalah untuk membentangkan data ini secara berstruktur, menyenaraikan pemain dalam pasukan masing-masing. Contohnya:

Senarai Pemain:

[
  {name: 'Gene', team: 'team alpha'},
  {name: 'George', team: 'team beta'},
  {name: 'Steve', team: 'team gamma'},
  {name: 'Paula', team: 'team beta'},
  {name: 'Scruath of the 5th sector', team: 'team gamma'}
]

Keputusan yang Diingini:

 - team alpha
    - Gene
 - team beta
    - George
    - Paula
 - team gamma
    - Steve
    - Scruath of the 5th sector

Penyelesaian: Memanfaatkan kumpulanBy Penapis

Angular menyediakan penapis yang tidak ternilai bernama groupBy yang memperkasakan anda dengan mudah mengumpulkan data berdasarkan sifat yang ditentukan. Dengan memanfaatkan penapis ini, anda boleh mencapai hasil yang diingini dengan cara yang mudah.

Kod JavaScript:

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

Templat HTML:

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

Hasil

Apabila anda melaksanakan kod, anda akan memperoleh output berikut:

Group name: alpha
  * player: Gene
Group name: beta
  * player: George
  * player: Paula
Group name: gamma
  * player: Steve
  * player: Scruath

Seperti yang anda boleh perhatikan, pemain kini dikumpulkan mengikut pasukan mereka, memberikan perwakilan data yang jauh lebih teratur dan mesra pengguna.

Nota Tambahan pada Menggunakan Angular.filter

Untuk memanfaatkan sepenuhnya utiliti angular.filter, ingat perkara penting berikut langkah:

• Sertakan 'angular.filter' dalam senarai kebergantungan modul anda.
• Sertakan fail angular-filter.js dalam index.html anda, pastikan ia dimuatkan selepas Angular itu sendiri .
• Pilih salah satu daripada empat kaedah pemasangan yang tersedia untuk menyepadukan penapis sudut ke dalam projek.

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