Cara menggunakan 'ng-model' di AngularJS dengan CONTOH

Isi kandungan:

Anonim

Apa itu model ng di AngularJs?

ng-model adalah arahan dalam Angular.JS yang mewakili model dan tujuan utamanya adalah untuk mengikat "pandangan" dengan "model".

Sebagai contoh, andaikan anda ingin membentangkan halaman mudah kepada pengguna akhir seperti yang ditunjukkan di bawah yang meminta pengguna memasukkan "Nama depan" dan "Nama belakang" di kotak teks. Dan kemudian anda ingin memastikan bahawa anda menyimpan maklumat yang dimasukkan oleh pengguna dalam model data anda.

Anda boleh menggunakan arahan ng-model untuk memetakan bidang kotak teks "First name" dan "Last Name" ke model data anda.

Arahan ng-model akan memastikan bahawa data dalam "paparan" dan "model" anda diselaraskan sepanjang masa.

Dalam tutorial ini, anda akan belajar-

  • Atribut ng-model
  • Cara menggunakan model ng
    • Kawasan Teks
    • Unsur input
    • Pilih elemen dropdown

Atribut ng-model

Seperti yang dibahas dalam pengenalan bab ini, atribut ng-model digunakan untuk mengikat data dalam model Anda ke tampilan yang disampaikan kepada pengguna.

Atribut ng-model digunakan untuk,

  1. Kawalan pengikat seperti input, kawasan teks dan memilih dalam pandangan ke dalam model.
  2. Berikan tingkah laku pengesahan - misalnya, pengesahan dapat ditambahkan ke kotak teks yang hanya watak berangka yang dapat dimasukkan ke dalam kotak teks.
  3. Atribut ng-model mengekalkan keadaan kawalan (Berdasarkan keadaan, kita bermaksud bahawa kawalan dan data pasti selalu diselaraskan. Sekiranya nilai data kita berubah, ia akan secara automatik mengubah nilai dalam kawalan dan sebaliknya)

Cara menggunakan model ng

1) Kawasan Teks

Tag kawasan teks digunakan untuk menentukan kawalan input teks berbilang baris. Kawasan teks boleh memuat jumlah aksara yang tidak terhad, dan teks akan dibuat dalam fon lebar tetap.

Jadi sekarang mari kita lihat contoh mudah bagaimana kita boleh menambahkan arahan model ng ke kawalan kawasan teks.

Dalam contoh ini, kami ingin menunjukkan bagaimana kami dapat meneruskan rentetan multiline dari pengawal ke paparan dan melampirkan nilai itu ke kawalan kawasan teks.

Event Registration


Guru99 Global Event


   Topic Description:

   

Penjelasan Kod:

  1. Arahan ng-model digunakan untuk melampirkan pemboleh ubah anggota yang disebut "pDescription" ke kawalan "textarea".

    Pemboleh ubah "pDescription" sebenarnya akan mengandungi teks, yang akan diteruskan ke kawalan kawasan teks. Kami juga telah menyebutkan 2 atribut untuk kawalan textarea iaitu baris = 4 dan col = 50. Atribut-atribut ini telah disebutkan sehingga kita dapat menunjukkan beberapa baris teks. Dengan menentukan atribut ini, textarea kini akan mempunyai 4 baris dan 50 lajur sehingga dapat menunjukkan beberapa baris teks.

  2. Di sini kita melampirkan variabel anggota ke objek lingkup yang disebut "pDescription" dan meletakkan nilai rentetan ke pemboleh ubah.
  3. Perhatikan bahawa kita memasukkan literal / n dalam string sehingga teks dapat terdiri dari beberapa baris ketika ditampilkan di kawasan teks. Literal / n membelah teks menjadi beberapa baris sehingga dapat dibuat dalam kawalan teks sebagai beberapa baris teks.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod di penyemak imbas.

Pengeluaran:

Dari keluaran

  • Dapat dilihat dengan jelas bahawa nilai yang diberikan pada pemboleh ubah pDescription sebagai sebahagian dari objek lingkup diteruskan ke kontrol textarea.
  • Selanjutnya, ia telah dipaparkan ketika halaman dimuat.

2) Unsur input

Arahan ng-model juga dapat diterapkan pada elemen input seperti kotak teks, kotak centang, butang radio, dll.

Mari kita lihat contoh bagaimana kita dapat menggunakan model ng dengan jenis input "kotak teks" dan "kotak centang".

Di sini kita akan mempunyai jenis input teks yang akan mempunyai nama "Guru99" dan akan ada 2 kotak centang, satu yang akan ditandai secara lalai dan yang lain tidak akan ditandakan.

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   Controller
   Models

Penjelasan Kod:

  1. Arahan ng-model digunakan untuk melampirkan pemboleh ubah anggota yang disebut "pname" ke kawalan teks jenis input. Pemboleh ubah "pname" akan mengandungi teks "Guru99" yang akan diteruskan ke kawalan input teks. Perhatikan bahawa sebarang nama boleh diberikan kepada nama pemboleh ubah anggota.
  2. Di sini kita mendefinisikan kotak pilihan pertama kita "Pengawal" yang dilampirkan pada anggota Topics.Controllers pemboleh ubah. Kotak pilihan akan ditandakan untuk kawalan cek ini.
  3. Di sini kami mendefinisikan kotak pilihan pertama kami "Model" yang dilampirkan pada pemboleh ubah anggota Topics.Models. Kotak pilihan tidak akan ditandakan untuk kawalan semak ini.
  4. Di sini kita melampirkan pemboleh ubah anggota yang disebut "pName" dan meletakkan nilai rentetan "Guru99".
  5. Kami menyatakan pemboleh ubah array ahli yang disebut "Topik" dan memberikannya dua nilai, yang pertama adalah "benar" dan yang kedua adalah "palsu".

    Oleh itu, apabila kotak semak pertama mendapat nilai benar, kotak centang akan ditandakan untuk kawalan ini, dan begitu juga, kerana nilai kedua adalah palsu, kotak centang tidak akan ditandakan untuk kawalan ini.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari output,

  • Dengan jelas dapat dilihat bahawa nilai yang diberikan pada pemboleh ubah pName adalah "Guru99"
  • Oleh kerana nilai centang pertama adalah "benar", lulus kotak centang ditandai untuk kotak "Pengawal". Begitu juga kerana nilai kedua adalah palsu, kotak centang tidak ditandakan untuk kotak pilihan "Model".

3) Pilih elemen dropdown

Arahan ng-model juga dapat diterapkan pada elemen pilih dan digunakan untuk mengisi item daftar dalam daftar pilih.

Mari kita lihat contoh bagaimana kita dapat menggunakan model ng dengan jenis input terpilih.

Di sini kita akan mempunyai jenis input teks yang akan mempunyai nama "Guru99" dan akan ada senarai pilih dengan 2 item senarai "Pengawal" dan "Model".

Event Registration


Guru99 Global Event


   Topic Description:

   Name : 
   Topic :
   
  1. Arahan ng-model digunakan untuk melampirkan pemboleh ubah anggota yang disebut "Topik" ke kawalan jenis pilih. Di dalam kawalan pilih, untuk setiap pilihan, kami melampirkan pemboleh ubah anggota Topics.option1 untuk pilihan pertama dan Topik.option2 untuk pilihan kedua.
  2. Di sini kami mendefinisikan pemboleh ubah array Topik kami yang memegang 2 pasangan nilai-kunci. Pasangan pertama mempunyai nilai "Pengawal" dan yang kedua mempunyai nilai "Model". Nilai-nilai ini akan diteruskan untuk memilih tag input pada pandangan.

    Sekiranya kod berjaya dilaksanakan, Output berikut akan ditunjukkan.

Pengeluaran:

Dari output, dapat dilihat bahawa nilai yang diberikan pada pemboleh ubah pName adalah "Guru99" dan kita dapat melihat bahawa kawalan input terpilih mempunyai pilihan "Pengawal" dan "Model".

Ringkasan

  • Model dalam Angular JS diwakili oleh arahan model ng. Tujuan utama arahan ini adalah untuk mengikat pandangan dengan model. Cara membina pengawal mudah menggunakan arahan ng-app, ng-controller dan ng-model.
  • Arahan model ng boleh dihubungkan dengan kawalan input "kawasan teks" dan rentetan multiline dapat dilewatkan dari pengawal ke pandangan.
  • Arahan ng-model boleh dihubungkan dengan kawalan input seperti teks dan kawalan kotak centang untuk menjadikannya lebih dinamis pada waktu berjalan.
  • Arahan ng-model juga dapat digunakan untuk mengisi daftar pilih dengan pilihan yang dapat ditampilkan kepada pengguna.