Mempelajari dan menyempurnakan cara melakukan tugas sehari-hari tertentu menggunakan Angular dapat meningkatkan karier Anda dengan cukup cepat, terutama jika Anda baru di . Pada artikel ini, kita akan membahas, tentang satu tugas yang harus dilakukan oleh pengembang ribuan kali: membuat kotak dropdown yang sederhana. Topik berikut akan dibahas dalam blog ini:
Apa itu Angular?
Nah, jika Anda sedang membaca blog tentang cara membuat kotak dropdown menggunakan Angular, dapat diasumsikan bahwa Anda sudah memiliki gambaran umum tentang Angular. Bagi Anda yang tidak dan telah menemukan blog ini karena keinginan dan fantasi internet, adalah kerangka kerja pengembangan front-end. Ini dikembangkan dan dikelola oleh raksasa teknologi, Google. Ini menyediakan cara modular untuk mengembangkan aplikasi web satu halaman seperti Gmail, PayPal, dan Lego. Aplikasi yang dibangun menggunakan Angular mengimplementasikan pendekatan Model-View-View-Model.
Apa itu Kotak Dropdown?
Kotak drop-down adalah metode bersih untuk menampilkan larik opsi karena hanya satu pilihan yang ditampilkan pada awalnya hingga pengguna mengaktifkan kotak dropdown. Untuk menambahkan dropdown-box ke halaman web, Anda akan menggunakan file Pilih elemen atau a Daftar barang . Tag pertama di elemen pilih harus memiliki opsi yang dipilih disetel ke nilai yang dipilih. Berikut cuplikan kode kecil untuk menunjukkan kepada Anda apa yang saya maksud.
Opsi 1 Opsi 2 Opsi 3
Tentu saja, kode di atas memerlukan javascript spesifiknya untuk memiliki perilaku yang diharapkan, tetapi kerangka dasar menu tarik-turun tetap sama. Mari kita lihat bagaimana kita melakukan ini di Angular sekarang.
Dropdown Box Menggunakan Angular
Sejujurnya, akan agak menakutkan untuk mendemonstrasikan semua cara yang mungkin untuk mengimplementasikan kotak dropdown dalam sudut. Otak setiap pengembang menangani logika dengan caranya sendiri yang unik dan saya telah melihat beberapa menu tarik-turun yang gila dalam karier saya. Saya akan menunjukkan kepada Anda pendekatan menu tarik-turun yang agak mendasar.
cara mengonversi ganda menjadi int
Metode 1: Membuat Daftar Dropdown Menggunakan ng-options
Anda dapat menggunakan opsi-ng untuk membuat menu tarik-turun dari larik atau daftar item.
perbedaan antara javascript dan jquery
var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh']})Metode 2: Membuat Daftar Dropdown Menggunakan ng-repeat
Angular menjadi serbaguna , jelas memiliki banyak cara untuk membuat menu tarik-turun dasar. Direktif ng-repeat mengulang blok kode HTML untuk setiap item dalam array, dapat digunakan untuk membuat opsi dalam daftar dropdown, tetapi direktif ng-options dibuat khusus untuk mengisi daftar dropdown dengan opsi dan memiliki satu opsi penting. Keuntungan yaitu menu dropdown yang dibuat dengan ng-options memungkinkan nilai yang dipilih menjadi objek, sedangkan dropdown yang dibuat dari ng-repeat harus berupa string.
Potongan kode khusus ini mengimplementasikan daftar yang sama menggunakan ng-repeat
{{name}} var app = angular.module ('demo', []) app.controller ('myCtrl', function ($ scope) {$ scope.names = ['Demavand', 'Pradeep', 'Ashutosh' ]})Ini membawa kita ke akhir blog yang agak pendek ini 'daftar dropdown menggunakan sudut'. Saya harap sekarang Anda memiliki gagasan tentang bagaimana Anda dapat menerapkan menu tarik-turun di proyek Anda sendiri. Jika Anda memiliki keraguan tentang blog ini, Anda dapat mempostingnya sebagai komentar di bagian komentar di bawah. Anda juga dapat membagikan cara kreatif Anda sendiri dalam membuat kotak dropdown.
Jika Anda ingin mempelajari lebih lanjut tentang kerangka kerja Angular, lihat yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini akan membantu Anda memahami Angular secara mendalam dan membantu Anda menguasai subjek.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar 'Angular Dropdown' dan saya akan menghubungi Anda kembali.