Bagaimana untuk Menghimpunkan Data mengikut Pasukan Menggunakan Penapis groupBy Angular?

Data Kumpulan dengan Penapis Sudut: Panduan Komprehensif

Mengumpulkan data ke dalam kategori yang bermakna ialah tugas biasa dalam pengaturcaraan, dan Angular menyediakan alat yang berkuasa mekanisme penapisan untuk memudahkan ini. Artikel ini menunjukkan cara menggunakan penapis groupBy Angular untuk menyusun senarai pemain ke dalam pasukan.

Masalah:

Anda mempunyai set data pemain dengan pasukan masing-masing. Anda perlu menapis set data ini untuk memaparkan pemain yang dikumpulkan mengikut pasukan mereka.

Contoh Set Data:

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

Output Jangkaan:

<li>team alpha
  <ul>
    <li>Gene</li>
  </ul>
</li>
<li>team beta
  <ul>
    <li>George</li>
    <li>Paula</li>
  </ul>
</li>
<li>team gamma
  <ul>
    <li>Steve</li>
    <li>Scruath</li>
  </ul>
</li>

Penyelesaian:

Untuk mencapai pengelompokan ini, Angular menyediakan penapis groupBy daripada modul angular.filternya. Penapis ini mengambil sifat sebagai hujah dan mengembalikan objek yang kuncinya ialah nilai unik harta itu dan nilainya ialah tatasusunan objek yang berkongsi nilai harta itu.

Dalam kes kami, kami mahu pemain kumpulan mengikut harta pasukan mereka. Begini cara kita boleh melakukannya:

JavaScript:

$scope.players = players; // Assign the dataset to a scope variable

HTML:

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

Dengan menggabungkan groupBy filter dengan ng-repeat, kita boleh mencipta pandangan hierarki data, di mana setiap pasukan dipaparkan sebagai item senarai, dan pemain yang tergolong dalam pasukan itu disenaraikan sebagai item senarai bersarang. Hasilnya ialah perwakilan data terkumpul yang teratur dan mudah difahami.

Nota:

Untuk menggunakan modul angular.filter, ia mesti ditambah sebagai pergantungan dalam modul Angular anda.

Atas ialah kandungan terperinci Bagaimana untuk Menghimpunkan Data mengikut Pasukan Menggunakan Penapis groupBy Angular?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!