Formulir AngularJS Kirim dengan Contoh (ng-submit)

Anonim

Bagaimana cara mengirimkan formulir menggunakan ng-submit

Proses pengiriman informasi di halaman web biasanya ditangani oleh acara pengiriman di browser web. Event ini biasanya digunakan untuk mengirimkan informasi yang mungkin telah dimasukkan oleh pengguna pada halaman web ke server untuk diproses lebih lanjut seperti kredensial login, data formulir, dll. Penyampaian informasi dapat dilakukan melalui permintaan GET atau POST.

AngularJS juga menyediakan arahan yang disebut ng-submit yang dapat digunakan untuk mengikat aplikasi ke acara submit di browser. Jadi dalam kasus AngularJS, pada event submit Anda dapat melakukan beberapa pemrosesan di dalam controller itu sendiri dan kemudian menampilkan informasi yang diproses kepada pengguna.

Mari kita ambil contoh bagaimana kita bisa mencapai ini.

Dalam contoh kirim-posting kami,

Kami akan menyajikan kotak teks kepada pengguna di mana mereka dapat memasukkan topik yang ingin mereka pelajari. Akan ada tombol submit di halaman tersebut, yang jika ditekan akan menambahkan topik ke daftar yang tidak diurutkan.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Penjelasan Kode:

  1. Kami pertama-tama mendeklarasikan tag HTML formulir kami, yang akan menahan kontrol "kotak teks" dan "tombol kirim". Kami kemudian menggunakan direktif ng-submit untuk mengikat fungsi "Display ()" ke formulir kami. Fungsi ini akan ditentukan di pengontrol kami dan akan dipanggil saat formulir dikirimkan.
  2. Kami memiliki kontrol teks di mana pengguna akan memasukkan Topik yang ingin mereka pelajari. Ini akan terikat ke variabel yang disebut 'Topik' yang akan digunakan di pengontrol kami.
  3. Ada tombol kirim normal yang akan diklik pengguna ketika mereka telah memasuki topik yang mereka inginkan.
  4. Kami telah menggunakan direktif ng-repeat untuk menampilkan item daftar topik yang dimasukkan pengguna. Arahan ng-repeat melewati setiap topik dalam larik 'AllTopic' dan menampilkan nama topik yang sesuai.
  5. Di pengontrol kami, kami mendeklarasikan variabel array yang disebut 'AllTopic.' Ini akan digunakan untuk menampung semua topik yang dimasukkan oleh pengguna di Langkah2.
  6. Kami mendefinisikan kode untuk fungsi Display () kami yang akan dipanggil setiap kali pengguna mengklik tombol Kirim. Di sini kami menggunakan fungsi push array untuk menambahkan Topik yang dimasukkan oleh pengguna melalui variabel 'Topic' ke dalam array 'AllTopic' kami.

Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

Untuk melihat kode bekerja, pertama, masukkan nama Topik seperti "AngularJS" seperti yang ditunjukkan di atas di kotak teks dan kemudian klik tombol Kirim.

  • Setelah tombol kirim diklik, Anda akan melihat item yang dimasukkan ke dalam kotak teks ditambahkan ke daftar item.
  • Ini dicapai dengan fungsi Display (), yang dipanggil saat tombol kirim ditekan.
  • Fungsi Display () menambahkan teks ke variabel array yang disebut 'AllTopic.' Dan direktif ng-repeat kami melewati setiap nilai dalam variabel array 'AllTopic' dan menampilkannya sebagai item daftar yang sesuai.

Ringkasan

Direktif "ng-submit" digunakan untuk memproses masukan yang dimasukkan oleh pengguna saat formulir dikirimkan.