Mempelajari dan menyempurnakan bagaimana melakukan tugas sehari-hari tertentu menggunakan Angular dapat meningkatkan karier anda dengan pantas, terutamanya jika anda baru dalam . Dalam artikel ini, kita akan membincangkan tentang satu tugas yang mesti dilakukan ribuan kali oleh pembangun: membuat kotak lungsur yang rendah hati. Topik berikut akan dibahas dalam blog ini:
apakah perbezaan antara jquery dan javascript
Apa itu Sudut?
Jika anda membaca blog tentang cara membuat kotak lungsur menggunakan Angular, boleh diandaikan bahawa anda sudah mempunyai idea umum tentang Angular. Bagi anda yang tidak dan tersandung di blog ini kerana kehebatan dan keinginan internet, adalah kerangka pembangunan front-end. Ia dikembangkan dan dikendalikan oleh syarikat teknologi gergasi, Google. Ini menyediakan cara modular untuk mengembangkan aplikasi web satu halaman seperti Gmail, PayPal dan Lego. Aplikasi yang dibina menggunakan Angular melaksanakan pendekatan Model-View-View-Model.
Apa itu Dropdown Box?
Kotak drop-down adalah kaedah yang bersih untuk menunjukkan pelbagai pilihan kerana hanya satu pilihan yang ditampilkan pada awalnya sehingga pengguna mengaktifkan kotak dropdown. Untuk menambahkan kotak dropdown ke laman web, anda akan menggunakan a pilih unsur atau a senarai barang . Tag pertama dalam elemen pilih perlu menetapkan pilihan yang dipilih ke nilai yang dipilih. Berikut adalah sedikit coretan kod untuk menunjukkan maksud saya.
Pilihan 1 Pilihan 2 Pilihan 3
Sudah tentu, kod di atas memerlukan javascript khusus untuk mempunyai tingkah laku yang diharapkan, tetapi kerangka asas menu lungsur tetap sama. Mari kita lihat bagaimana kita melakukan ini di Angular sekarang.
Kotak Turun Menggunakan Sudut
Secara jujur, agak menakutkan untuk menunjukkan semua cara yang mungkin untuk melaksanakan drop-box dalam sudut. Setiap otak pengembang mengendalikan logik dengan cara yang tersendiri dan saya telah melihat beberapa menu dropdown yang gila dalam karier saya. Saya akan rendah hati dan menunjukkan kepada anda pendekatan menu dropdown yang agak asas.
Kaedah 1: Membuat Senarai Dropdown Menggunakan pilihan ng
Anda boleh menggunakan pilihan ng untuk membuat menu lungsur keluar dari pelbagai atau senarai item.
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ lingkup) {$ lingkup.names = ['Demavand', 'Pradeep', 'Ashutosh']})Kaedah 2: Membuat Senarai Dropdown Menggunakan ng-berulang
Sudut menjadi serba boleh , jelas mempunyai pelbagai cara untuk membuat menu dropdown asas. Arahan ng-repeat mengulangi sekumpulan kod HTML untuk setiap item dalam array, ia dapat digunakan untuk membuat pilihan dalam daftar dropdown, tetapi arahan ng-options dibuat terutama untuk mengisi daftar dropdown dengan pilihan dan memiliki satu yang penting kelebihan iaitu menu dropdown yang dibuat dengan ng-options membolehkan nilai yang dipilih menjadi objek, sementara dropdown yang dibuat dari ng-repeat harus berupa string.
Coretan kod tertentu ini menerapkan senarai yang sama menggunakan ng-ulangan
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ lingkup) {$ lingkup.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Ini membawa kita ke akhir blog dropdown list yang agak pendek ini menggunakan sudut. Saya harap sekarang anda mempunyai idea bagaimana anda dapat melaksanakan menu lungsur dalam projek anda sendiri. Sekiranya anda mempunyai keraguan mengenai blog ini, anda boleh menghantarnya sebagai komen di bahagian komen di bawah. Anda juga boleh berkongsi cara kreatif anda sendiri untuk membuat kotak lungsur.
Sekiranya anda ingin mengetahui lebih lanjut mengenai rangka kerja sudut, lihatlah kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini akan membantu anda memahami sudut dengan mendalam dan membantu anda mencapai penguasaan terhadap subjek.
apa itu kaedah javascript
Ada soalan untuk kami? Sila sebutkan di bahagian komen 'Angular Dropdown' dan saya akan menghubungi anda.