Apa ng-model di AngularJs?
ng-model adalah arahan di Angular.JS yang mewakili model dan tujuan utamanya adalah untuk mengikat "tampilan" ke "model".
Misalnya, Anda ingin menyajikan halaman sederhana kepada pengguna akhir seperti yang ditunjukkan di bawah ini yang meminta pengguna untuk memasukkan "Nama depan" dan "Nama belakang" di kotak teks. Dan kemudian Anda ingin memastikan bahwa Anda menyimpan informasi yang telah dimasukkan pengguna dalam model data Anda.
Anda dapat menggunakan direktif ng-model untuk memetakan bidang kotak teks "Nama depan" dan "Nama Belakang" ke model data Anda.
Perintah ng-model akan memastikan bahwa data dalam "view" dan "model" Anda tetap sinkron sepanjang waktu.
Dalam tutorial ini, Anda akan belajar-
- Atribut ng-model
- Cara menggunakan ng-model
- Area Teks
- Elemen masukan
- Pilih bentuk elemen Dropdown
Atribut ng-model
Seperti yang dibahas dalam pendahuluan bab ini, atribut ng-model digunakan untuk mengikat data dalam model Anda ke tampilan yang disajikan kepada pengguna.
Atribut ng-model digunakan untuk,
- Kontrol mengikat seperti input, area teks dan memilih dalam tampilan ke dalam model.
- Berikan perilaku validasi - misalnya, validasi dapat ditambahkan ke kotak teks yang hanya dapat memasukkan karakter numerik ke dalam kotak teks.
- Atribut ng-model mempertahankan status kontrol (Yang kami maksud adalah kontrol dan data terikat untuk selalu disinkronkan. Jika nilai data kita berubah, secara otomatis akan mengubah nilai dalam kontrol dan dan sebaliknya)
Cara menggunakan ng-model
1) Area Teks
Tag area teks digunakan untuk menentukan kontrol input teks multi-baris. Area teks dapat menampung jumlah karakter yang tidak terbatas, dan teks ditampilkan dalam font dengan lebar tetap.
Jadi sekarang mari kita lihat contoh sederhana bagaimana kita bisa menambahkan direktif ng-model ke kontrol area teks.
Dalam contoh ini, kami ingin menunjukkan bagaimana kami dapat mengirimkan string multiline dari pengontrol ke tampilan dan melampirkan nilai itu ke kontrol area teks.
Event Registration Guru99 Global Event
Penjelasan Kode:
- The ng model direktif digunakan untuk melampirkan variabel anggota yang disebut "pDescription" untuk kontrol "textarea".
Variabel "pDescription" sebenarnya akan berisi teks, yang akan diteruskan ke kontrol area teks. Kami juga telah menyebutkan 2 atribut untuk kontrol textarea yaitu baris = 4 dan kolom = 50. Atribut ini telah disebutkan sehingga kami dapat menampilkan beberapa baris teks. Dengan mendefinisikan atribut ini, area teks sekarang akan memiliki 4 baris dan 50 kolom sehingga dapat menampilkan beberapa baris teks.
- Di sini kita melampirkan variabel anggota ke objek lingkup yang disebut "pDescription" dan meletakkan nilai string ke variabel tersebut.
- Perhatikan bahwa kita meletakkan / n literal dalam string sehingga teks bisa terdiri dari beberapa baris saat ditampilkan di area teks. Literal / n membagi teks menjadi beberapa baris sehingga dapat dirender dalam kontrol textarea sebagai beberapa baris teks.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluaran
- Dapat dilihat dengan jelas bahwa nilai yang ditetapkan ke variabel pDescription sebagai bagian dari objek cakupan diteruskan ke kontrol textarea.
- Selanjutnya, itu telah ditampilkan saat halaman dimuat.
2) Elemen masukan
Direktif ng-model juga dapat diterapkan ke elemen input seperti kotak teks, kotak centang, tombol radio, dll.
Mari kita lihat contoh bagaimana kita bisa menggunakan ng-model dengan tipe input "textbox" dan "checkbox".
Di sini kita akan memiliki jenis input teks yang akan memiliki nama "Guru99" dan akan ada 2 kotak centang, yang satu akan ditandai secara default dan yang lainnya tidak akan ditandai.
Event Registration Guru99 Global Event
Penjelasan Kode:
- The ng model direktif digunakan untuk melampirkan variabel anggota yang disebut "pname" untuk kontrol teks input type. Variabel "pname" akan berisi teks "Guru99" yang akan diteruskan ke kontrol input teks. Perhatikan bahwa nama apa pun dapat diberikan ke nama variabel anggota.
- Di sini kita mendefinisikan kotak centang pertama kita "Pengendali" yang dilampirkan ke variabel anggota Topics.Controllers. Kotak centang akan ditandai untuk kontrol cek ini.
- Di sini kita mendefinisikan kotak centang pertama kita "Model" yang dilampirkan ke variabel anggota Topics.Models. Kotak centang tidak akan ditandai untuk kontrol cek ini.
- Di sini kita melampirkan variabel anggota yang disebut "pName" dan meletakkan nilai string "Guru99".
- Kami mendeklarasikan variabel array anggota yang disebut "Topik" dan memberinya dua nilai, yang pertama adalah "benar" dan yang kedua adalah "salah".
Jadi ketika kotak centang pertama mendapat nilai benar, kotak centang akan ditandai untuk kontrol ini, dan demikian pula, karena nilai kedua salah, kotak centang tidak akan ditandai untuk kontrol ini.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
- Terlihat jelas bahwa nilai yang ditetapkan ke variabel pName adalah "Guru99"
- Karena nilai cek pertama adalah "benar" maka lulus, kotak centang ditandai untuk kotak centang "Pengontrol". Demikian juga karena nilai kedua salah, kotak centang tidak ditandai untuk kotak centang "Model".
3) Pilih bentuk elemen Dropdown
Direktif ng-model juga dapat diterapkan ke elemen pilih dan digunakan untuk mengisi item daftar di daftar pilih.
Mari kita lihat contoh bagaimana kita bisa menggunakan ng-model dengan tipe input select.
Di sini kita akan memiliki jenis input teks yang akan memiliki nama "Guru99" dan akan ada daftar pilih dengan 2 item daftar "Controller" dan "Model".
Event Registration Guru99 Global Event
- The ng model direktif digunakan untuk melampirkan variabel anggota yang disebut "Topik" untuk pilih jenis kontrol. Di dalam kontrol pilih, untuk setiap opsi, kami melampirkan variabel anggota Topics.option1 untuk opsi pertama dan Topics.option2 untuk opsi kedua.
- Di sini kami mendefinisikan variabel larik Topik yang menampung 2 pasangan nilai kunci. Pasangan pertama memiliki nilai "Pengendali" dan yang kedua memiliki nilai "Model". Nilai-nilai ini akan diteruskan untuk memilih tag masukan dalam tampilan.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan.
Keluaran:
Dari hasil keluaran, terlihat bahwa nilai yang ditetapkan ke variabel pName adalah "Guru99" dan kita dapat melihat bahwa kontrol masukan pilihan memiliki opsi "Pengendali" dan "Model".
Ringkasan
- Model di Angular JS diwakili oleh direktif ng-model. Tujuan utama dari arahan ini adalah untuk mengikat view ke model. Cara membuat pengontrol sederhana menggunakan arahan ng-app, ng-controller, dan ng-model.
- Direktif ng-model dapat dihubungkan ke kontrol masukan "area teks" dan string multiline dapat diteruskan dari pengontrol ke tampilan.
- Direktif ng-model dapat ditautkan ke kontrol input seperti kontrol teks dan kotak centang untuk membuatnya lebih dinamis pada waktu proses.
- Direktif ng-model juga dapat digunakan untuk mengisi daftar pilihan dengan opsi yang dapat ditampilkan kepada pengguna.