Borang AngularJS Hantar dengan Contoh (ng-submit)

Anonim

Cara Mengemukakan borang menggunakan ng-submit

Proses pengiriman maklumat di laman web biasanya ditangani oleh acara kirim di penyemak imbas web. Acara ini biasanya digunakan untuk mengirim informasi yang mungkin dimasukkan oleh pengguna di laman web ke pelayan untuk diproses lebih lanjut seperti bukti masuk, data formulir, dll. Penyerahan maklumat dapat dilakukan melalui permintaan GET atau POST.

AngularJS juga memberikan arahan yang disebut ng-submit yang dapat digunakan untuk mengikat aplikasi ke acara kirim penyemak imbas. Oleh itu, dalam kes AngularJS, pada acara hantar, anda dapat melakukan beberapa pemprosesan dalam pengawal itu sendiri dan kemudian memaparkan maklumat yang diproses kepada pengguna.

Mari kita ambil contoh bagaimana kita dapat mencapainya.

Dalam contoh penyerahan kami,

Kami akan menyampaikan kotak teks kepada pengguna di mana mereka dapat memasukkan topik yang ingin mereka pelajari. Akan ada butang kirim di halaman, yang ketika ditekan akan menambahkan topik ke daftar yang tidak tersusun.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Penjelasan Kod:

  1. Kami pertama kali menyatakan tag HTML borang kami, yang akan memegang kawalan "kotak teks" dan "butang kirim". Kami kemudian menggunakan arahan ng-submit untuk mengikat fungsi "Display ()" ke borang kami. Fungsi ini akan ditentukan dalam pengawal kami dan akan dipanggil semasa borang dihantar.
  2. Kami mempunyai kawalan teks di mana pengguna akan memasukkan Topik yang ingin mereka pelajari. Ini akan terikat dengan pemboleh ubah yang disebut 'Topik' yang akan digunakan dalam pengawal kami.
  3. Terdapat butang kirim biasa yang akan diklik oleh pengguna ketika mereka memasukkan topik yang mereka inginkan.
  4. Kami telah menggunakan arahan ng-repeat untuk memaparkan senarai item topik yang dimasukkan pengguna. Arahan ng-ulangan melalui setiap topik dalam array 'AllTopic' dan memaparkan nama topik dengan sewajarnya.
  5. Dalam pengawal kami, kami menyatakan pemboleh ubah array yang disebut 'AllTopic.' Ini akan digunakan untuk menyimpan semua topik yang dimasukkan oleh pengguna dalam Langkah 2.
  6. Kami menentukan kod untuk fungsi Display () kami yang akan dipanggil setiap kali pengguna mengklik butang Kirim. Di sini kita menggunakan fungsi push array untuk menambahkan Topik yang dimasukkan oleh pengguna melalui pemboleh ubah 'Topik' ke dalam array kita 'AllTopic.'

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

Pengeluaran:

Untuk melihat kod berfungsi, pertama, masukkan nama Topik seperti "AngularJS" seperti yang ditunjukkan di atas di kotak teks dan kemudian klik pada butang Kirim.

  • Setelah butang kirim diklik, anda akan melihat item yang dimasukkan dalam kotak teks ditambahkan ke senarai item.
  • Ini dicapai dengan fungsi Display (), yang dipanggil ketika butang kirim ditekan.
  • Fungsi Display () menambahkan teks ke pemboleh ubah array yang disebut 'AllTopic.' Dan arahan ng-ulangan kami melalui setiap nilai dalam larik array 'AllTopic' dan memaparkannya sebagai item senarai dengan sewajarnya.

Ringkasan

Arahan "ng-submit" digunakan untuk memproses input yang dimasukkan oleh pengguna ketika formulir dikirimkan.