Rumah >hujung hadapan web >tutorial js >Bagaimanakah saya boleh mengumpulkan data mengikut sifat menggunakan penapis `groupBy` Angular?
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!