Petunjuk ng-repeat AngularJS dengan Contoh

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

Direktif ng-repeat di AngularJS merender satu salinan elemen untuk setiap item dalam koleksi yang didefinisikan pada cakupan controller. Ini mengubah array menjadi daftar, tabel, atau markup berulang lainnya tanpa menulis perulangan manual.

  • 🔁 Perilaku Inti: ng-repeat mengkloning elemen induknya sekali untuk setiap item, jadi direktif tersebut berada pada elemen yang diulang, bukan pada wadahnya.
  • ️ Variabel Perulangan: Nama sebelum kata "in" menjadi alias lokal untuk item saat ini di dalam klon tersebut.
  • 🧬 Lingkup Anak: Setiap iterasi menerima cakupan anak (child scope) tersendiri, itulah sebabnya pemberian nilai primitif di dalam loop tidak mencapai induknya.
  • 🔑 identitas Tracking: A trac`k` berdasarkan ekspresi memberi tahu AngularJS cara mengidentifikasi item, dan ini diperlukan ketika sebuah koleksi berisi nilai yang berulang.
  • 🔢 Fitur Lokal Bawaan: Properti seperti $index, $first, dan $last tersedia di dalam setiap iterasi untuk penomoran dan penataan gaya.
  • ⚠️ Status Dukungan: AngularJS mencapai akhir masa pakainya pada 31 Desember 2021 dan tidak menerima pembaruan keamanan lebih lanjut.
Baca Selengkapnya

Direktif ng-repeat AngularJS

Petunjuk ng-repeat di AngularJS

The ng-ulangi Direktif Dalam AngularJS, `ng-repeat` digunakan untuk menampilkan nilai berulang yang didefinisikan dalam controller. Terkadang kita perlu menampilkan daftar item di view, dan `ng-repeat` akan merender daftar yang didefinisikan dalam controller ke halaman view.

⚠️ Pemberitahuan dukungan: AngularJS telah mencapai akhir hayat pada 31 Desember 2021 dan tidak menerima patch atau perbaikan keamanan lebih lanjut. Arahan di bawah ini tetap akurat untuk memelihara aplikasi AngularJS 1.x yang ada; dalam versi modern Kaku yang setara adalah *ngFor arahan struktural.

Contoh Petunjuk AngularJS ng-repeat

Mari kita lihat contoh directive ng-repeat di AngularJS:

Petunjuk ng-repeat di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
    <h1>Topics</h1>
    <ul>
        <li ng-repeat="tpname in TopicNames">
            {{tpname.name}}
        </li>
    </ul>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.TopicNames = [
            { name: "What controllers do from Angular's perspective" },
            { name: "Controller Methods" },
            { name: "Building a basic controller" }
        ];
    });
</script>

</body>
</html>

Code Penjelasan:

  1. Dalam majalah pengawasPertama-tama, kita mendefinisikan array item daftar yang akan ditampilkan di tampilan. Di sini, sebuah array disebut TopicNames berisi tiga item, masing-masing berupa pasangan nama-nilai.
  2. Array tersebut langsung diberikan ke $scope.TopicNames, yang membuatnya tersedia untuk tampilan yang terikat pada pengontrol ini.
  3. Tag HTML <ul> (daftar tidak berurutan) dan <li> (item daftar) menampilkan item. Direktif ng-repeat mengulangi setiap entri dalam array, dan tpname adalah variabel lokal yang menyimpan item saat ini, jadi {{tpname.name}} mencetak properti namanya.

⚠️ Koreksi: Penjelasan aslinya menyatakan bahwa array tersebut "ditambahkan ke variabel anggota yang disebut topics“. Variabel seperti itu tidak ada dalam kode — array langsung diberikan ke $scope.TopicNames, yang merupakan nama yang dirujuk oleh tampilan tersebut. Memperkenalkan nama kedua di sini adalah penyebab umum dari daftar kosong.

Jika kode berhasil dieksekusi, output berikut akan ditampilkan di browser.

Petunjuk ng-repeat di AngularJS

Pengontrol Berganda AngularJS

Sebelumnya kita melihat sebuah controller tunggal di mana satu metode menangani baik penjumlahan maupun pengurangan.tracalih-alih menangani angka, Anda dapat menggunakan beberapa controller untuk memisahkan logika dengan lebih rapi. Misalnya, satu controller dapat beroperasi pada angka sementara controller lain beroperasi pada string.

Mari kita lihat contoh mendefinisikan beberapa controller dalam aplikasi AngularJS.

Pengontrol Berganda AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp">
    <div ng-controller="firstcontroller">
        <div ng-controller="secondcontroller">
            {{lname}}
        </div>
    </div>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('firstcontroller', function($scope) {
        $scope.pname = "firstcontroller";
    });

    app.controller('secondcontroller', function($scope) {
        $scope.lname = "secondcontroller";
    });
</script>

</body>
</html>

Code Penjelasan:

  1. Dua pengontrol didefinisikan, firstcontroller ke secondcontrollerMasing-masing melampirkan variabel ke variabelnya sendiri. cakupan: pname pada yang pertama, lname di kedua.
  2. Dalam tampilan tersebut, controller kedua bersarang di dalam controller pertama, dan ekspresinya berbunyi lname dari cakupan dalam. Karena pengontrol bersarang mewarisi dari induknya, {{pname}} Hal ini juga akan terselesaikan di sini — pewarisan mengalir ke bawah, tidak pernah ke atas.

Jika kode berhasil dieksekusi, teks pengontrol kedua ditampilkan.

Pengontrol Berganda AngularJS

Jangan lewatkan:

Cara Menggunakan track oleh dengan ng-repeat

Kegagalan ng-repeat yang paling umum adalah kesalahan ini. Duplicates in a repeater are not allowed. Ini muncul saat sebuah koleksi berisi nilai yang sama dua kali, dan menghentikan rendering daftar sepenuhnya.

Penyebabnya adalah identitas. tracAngularJS membutuhkan kunci yang stabil untuk setiap item agar dapat menggunakan kembali node DOM daripada membangunnya kembali setiap kali terjadi digest. Secara default, AngularJS menggunakan nilai item itu sendiri, sehingga dua nilai yang identik akan bertabrakan.

<!-- Fails: the value 2 appears twice -->
<li ng-repeat="n in [1, 2, 2, 3]">{{n}}</li>

<!-- Works: position is unique even when values repeat -->
<li ng-repeat="n in [1, 2, 2, 3] track by $index">{{n}}</li>

<!-- Best for records from a server: track by a real identifier -->
<li ng-repeat="topic in TopicNames track by topic.id">{{topic.name}}</li>

Memilih di antara kedua bentuk tersebut ternyata lebih penting daripada yang terlihat pada awalnya. Tracking by $index selalu menyelesaikan kesalahan, karena posisi bersifat unik menurut definisi, tetapi ia mengikat setiap node DOM ke slot daripada ke record. Mengurutkan ulang atau memfilter koleksi kemudian menggunakan kembali node yang salah, yang muncul sebagai kolom input yang terus muncul.ping teks baris sebelumnya.

Tracking dengan pengenal yang sah seperti topic.id Hal itu sepenuhnya menghindari masalah tersebut. AngularJS dapat mengikuti setiap data saat berpindah, sehingga ia menyusun ulang node yang ada alih-alih menghancurkan dan membangunnya kembali. Pada daftar yang panjang, ini juga jauh lebih cepat, karena rendering ulang hanya menyentuh baris yang benar-benar berubah. Gunakan $index hanya untuk larik nilai biasa yang tidak pernah diurutkan ulang.

Properti Khusus yang Tersedia di Dalam ng-repeat

Setiap iterasi ng-repeat mengekspos beberapa properti hanya baca pada cakupan anak-nya sendiri. Properti ini menjelaskan posisi item saat ini dalam koleksi, yang mencakup penomoran, gaya bergantian, dan pemisah tanpa menambahkan status tambahan apa pun ke controller.

Milik Tipe Nilai
$index Jumlah Posisi item saat ini, dimulai dari 0
$first Boolean Hanya berlaku untuk item pertama saja
$last Boolean Hanya berlaku untuk item terakhir.
$middle Boolean Hal ini berlaku untuk setiap item yang bukan pertama maupun terakhir.
$even Boolean Benar jika $indeks genap
$odd Boolean Benar jika $index adalah bilangan ganjil

Penggunaan umum menggabungkannya dengan ng-class untuk zebra striping, seperti dalam ng-class="{'row-alt': $odd}", atau dengan ng-if untuk menampilkan pemisah di setiap baris kecuali baris terakhir, tertulis ng-if="!$last"Menampilkan nomor baris yang mudah dibaca manusia itu sangat sederhana. {{$index + 1}}, karena indeksnya berbasis nol. Keenam properti tersebut dihitung ulang secara otomatis setiap kali koleksi berubah, sehingga tidak ada yang perlu dihitung ulang secara manual.

Kesalahan Umum ng-repeat dan Cara Memperbaikinya

Sebagian besar masalah ng-repeat berasal dari nilai duplikat, pewarisan cakupan, atau dari direktif yang berada pada elemen yang salah. Setiap gejala di bawah ini menyebutkan penyebabnya.

  • Duplikat dalam repeater tidak diperbolehkan: Koleksi tersebut berisi nilai yang berulang. Tambahkan track by $index, atau lebih baik, track by properti yang unik.
  • Daftar tersebut tidak menampilkan apa pun: Nama pada tampilan tidak sesuai dengan properti pada cakupan. Cetak koleksi dengan {{TopicNames}} untuk memastikan barang tersebut telah sampai.
  • Setiap elemen diulang, termasuk pembungkusnya: ng-repeat ditempatkan pada container, bukan pada item. Pindahkan ke <li> or <tr>.
  • Mengedit input akan mengubah baris yang salah: daftarnya adalah tracdiketik oleh $index sementara barang-barang dipesan ulang. Track digantikan oleh pengidentifikasi yang stabil.
  • Perubahan di dalam loop tidak akan tersimpan: Setiap iterasi memiliki cakupan anak (child scope) sendiri, sehingga menulis ke tipe data primitif akan membuat salinan lokal. Tulis ke properti objek, seperti... item.done.

Pertanyaan Umum Demo Slot

Ya, menggunakan ng-repeat="(key, value) in myObject"Perlu dicatat bahwa AngularJS mengiterasi kunci objek dalam urutan terurut, bukan urutan penyisipan, sehingga array lebih aman ketika urutan penting.

Filter berantai dalam ekspresi, seperti pada ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Susunan data aslinya tidak diubah; hanya urutan dan subset yang ditampilkan yang berubah.

Ya. AI alat memetakan ng-repeat ke *ngFor ke track oleh untuk tracFungsi kBy. Periksa filter dengan cermat, karena Angular sengaja menghilangkan pipe filter dan orderBy bawaan.

Alat AI mendeteksi panggilan fungsi di dalam ekspresi pengulangan, yang dijalankan ulang pada setiap digest, dan yang hilang. tracklausa k yang memaksa pembangunan ulang DOM secara penuh. Keduanya merupakan penyebab umum dari daftar yang lambat.

Gunakan formulir komentar, ng-repeat-start ke ng-repeat-end, yang mengulang serangkaian elemen sejenis. Ini penting dalam tabel, di mana div tambahan akan merusak markup.

Ringkaslah postingan ini dengan: