Memaparkan maklumat berulang
Kadang-kadang kita mungkin diminta untuk menampilkan daftar item dalam tampilan, jadi pertanyaannya adalah bagaimana kita dapat menampilkan daftar item yang ditentukan dalam pengawal kita ke halaman pandangan kita.
Angular memberikan arahan yang disebut "ng-repeat" yang dapat digunakan untuk menampilkan nilai berulang yang ditentukan dalam pengawal kami.
Mari kita lihat contoh bagaimana kita dapat mencapainya.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Penjelasan Kod:
- Di pengawal, pertama-tama kita menentukan susunan item senarai yang ingin kita tentukan dalam paparan. Di sini kami telah menentukan satu array yang disebut "TopicNames" yang mengandungi tiga item. Setiap item terdiri daripada pasangan nilai-nama.
- Susunan TopicsNames kemudian ditambahkan ke pemboleh ubah anggota yang disebut "topik" dan dilampirkan ke objek skop kami.
- Kami menggunakan tag HTML dari
- (Daftar Tidak Tersusun) dan
- (Item Senarai) untuk memaparkan senarai item dalam susunan kami. Kami kemudian menggunakan arahan ng-repeat untuk memeriksa setiap item dalam array kami. Perkataan "tpname" adalah pemboleh ubah yang digunakan untuk menunjuk ke setiap item dalam topik array.TopicNames.
- Dalam ini, kami akan memaparkan nilai setiap item array.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas. Anda akan melihat semua item array (Pada dasarnya TopicNames dalam topik) dipaparkan.
Pengeluaran:
Pengawal Pelbagai Angularjs
Contoh pengawal lanjutan adalah konsep mempunyai banyak pengawal dalam aplikasi JS sudut.
Anda mungkin mahu menentukan beberapa pengawal untuk memisahkan fungsi logik perniagaan yang berbeza. Sebelumnya kami telah menyebut tentang kaedah yang berbeza dalam pengawal di mana satu kaedah mempunyai fungsi yang berasingan untuk penambahan dan pengurangan nombor. Anda boleh mempunyai beberapa pengawal untuk mempunyai pemisahan logik yang lebih maju. Sebagai contoh, anda boleh mempunyai satu alat kawalan yang hanya menjalankan operasi pada nombor dan yang lain yang menjalankan operasi pada rentetan.
Mari kita lihat contoh bagaimana kita dapat menentukan pelbagai pengawal dalam aplikasi sudut.JS.
Event Registration Guru99 Global Event
{{lname}}
Penjelasan Kod:
- Di sini kita mendefinisikan 2 pengawal yang disebut "firstController" dan "secondController". Untuk setiap pengawal kami juga menambah beberapa kod untuk diproses. Dalam firstController kami, kami melampirkan pemboleh ubah yang disebut "pname" yang mempunyai nilai "firstController", dan di secondController kami melampirkan pemboleh ubah yang disebut "lname" yang mempunyai nilai "secondController".
- Pada pandangan, kami mengakses kedua pengawal dan menggunakan pemboleh ubah anggota dari pengawal kedua.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas. Anda akan melihat semua teks "secondController" seperti yang diharapkan.
Pengeluaran:
Ringkasan
- Arahan ng-repeater dapat digunakan untuk menampilkan beberapa item berulang.
- Kami juga melihat pengawal lanjutan yang melihat definisi pelbagai pengawal dalam aplikasi.