Menampilkan informasi berulang
Terkadang kami mungkin diminta untuk menampilkan daftar item dalam tampilan, jadi pertanyaannya adalah bagaimana kami dapat menampilkan daftar item yang ditentukan di pengontrol kami ke halaman tampilan kami.
Angular menyediakan direktif yang disebut "ng-repeat" yang dapat digunakan untuk menampilkan nilai berulang yang ditentukan dalam pengontrol kami.
Mari kita lihat contoh bagaimana kita bisa mencapai ini.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Penjelasan Kode:
- Di controller, pertama-tama kita mendefinisikan larik item daftar yang ingin kita definisikan dalam tampilan. Di sini kami telah mendefinisikan sebuah array yang disebut "TopicNames" yang berisi tiga item. Setiap item terdiri dari pasangan nama-nilai.
- Array TopicsNames kemudian ditambahkan ke variabel anggota yang disebut "topik" dan dilampirkan ke objek cakupan kita.
- Kami menggunakan tag HTML
- (Unordered List) dan
- (List Item) untuk menampilkan daftar item dalam larik kami. Kami kemudian menggunakan direktif ng-repeat untuk melewati setiap item dalam array kami. Kata "tpname" adalah variabel yang digunakan untuk menunjuk ke setiap item dalam topik array.TopicNames.
- Dalam hal ini, kami akan menampilkan nilai dari setiap item array.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser. Anda akan melihat semua item dari array (Pada dasarnya Nama Topik dalam topik) ditampilkan.
Keluaran:
Angularjs Multiple Controllers
Contoh pengontrol lanjutan adalah konsep memiliki beberapa pengontrol dalam aplikasi JS sudut.
Anda mungkin ingin menentukan beberapa pengontrol untuk memisahkan fungsi logika bisnis yang berbeda. Sebelumnya kami menyebutkan tentang memiliki metode berbeda dalam pengontrol di mana satu metode memiliki fungsionalitas terpisah untuk penjumlahan dan pengurangan angka. Nah, Anda dapat memiliki banyak pengontrol untuk memiliki pemisahan logika yang lebih maju. Misalnya, Anda dapat memiliki satu pengontrol yang hanya melakukan operasi pada angka dan yang lainnya melakukan operasi pada string.
Mari kita lihat contoh bagaimana kita dapat mendefinisikan banyak pengontrol dalam aplikasi angular.JS.
Event Registration Guru99 Global Event
{{lname}}
Penjelasan Kode:
- Di sini kita mendefinisikan 2 pengontrol yang disebut "firstController" dan "secondController". Untuk setiap pengontrol kami juga menambahkan beberapa kode untuk diproses. Di firstController kami, kami melampirkan variabel bernama "pname" yang memiliki nilai "firstController", dan di secondController kami melampirkan variabel bernama "lname" yang memiliki nilai "secondController".
- Dalam tampilan, kami mengakses kedua pengontrol dan menggunakan variabel anggota dari pengontrol kedua.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser. Anda akan melihat semua teks "secondController" seperti yang diharapkan.
Keluaran:
Ringkasan
- Direktif ng-repeater dapat digunakan untuk menampilkan beberapa item berulang.
- Kami juga melihat pengontrol lanjutan yang melihat definisi beberapa pengontrol dalam sebuah aplikasi.