AngularJS ng-kirim dengan Contoh Pengiriman Formulir

Oleh: James Hartman James Hartman
Hours Updated

Petunjuk pengiriman AngularJS

ng-kirim arahan di AngularJS digunakan untuk mengikat aplikasi ke acara pengiriman browser. Jadi dalam kasus AngularJS pada acara pengiriman, Anda dapat melakukan beberapa pemrosesan di dalam pengontrol itu sendiri dan kemudian menampilkan informasi yang diproses kepada pengguna.

Cara Mengirim Formulir di AngularJS menggunakan ng-submit

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

Mari kita ambil contoh pengiriman formulir Angular untuk melihat cara mengirimkan formulir di AngularJS.

Dalam contoh pengiriman formulir AngularJS, kami akan menyajikan kotak teks kepada pengguna tempat mereka dapat memasukkan topik yang ingin mereka pelajari. Akan ada tombol kirim di halaman, yang jika ditekan akan menambahkan topik ke daftar yang tidak berurutan.

Kirim Formulir di AngularJS menggunakan ng-submit
Mengirimkan Formulir di AngularJS menggunakan ng-submit

Contoh Pengiriman Formulir AngularJS

Sekarang, kita akan melihat contoh pengiriman formulir AngularJS dari Controller menggunakan direktif ng-submit:

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form ng-submit="Display()">
        &nbsp;&nbsp;&nbsp;
        Enter which topic you would like to learn
        <input type="text"  ng-app="sampleApp" ng-model="Topic"><br>

        <input type="submit" value="Submit"/>

        <ul ng-repeat="topicname in AllTopic">
            <li>{{topicname}}</li>
        </ul>
    </form>
</div>

<script>
   var sampleApp = angular.module("sampleApp",[]);

    sampleApp.controller("AngularController",function($scope) {
        $scope.AllTopic=[];
        $scope.Display = function () {
            $scope.AllTopic.push($scope.Topic);
        }
    });
</script>
</body>
</html>

Penjelasan Kode:

  1. Pertama-tama kita mendeklarasikan tag HTML formulir kita, yang akan menampung kontrol “kotak teks” dan “tombol kirim” seperti yang ditunjukkan dalam contoh peristiwa pengiriman formulir Angular. Kemudian kita menggunakan direktif Angular ngsubmit untuk mengikat fungsi “Display()” ke formulir kita. Fungsi ini akan didefinisikan dalam pengontrol kita dan akan dipanggil saat formulir dikirimkan.
  2. Kami memiliki kontrol teks di mana pengguna akan memasukkan Topik yang ingin mereka pelajari. Ini akan terikat pada variabel bernama 'Topik' yang akan digunakan di pengontrol kami.
  3. Terdapat tombol submit normal di AngularJS yang akan diklik pengguna ketika sudah memasukkan topik yang diinginkan.
  4. Kami telah menggunakan ng-ulangi arahan untuk menampilkan item daftar topik yang dimasukkan pengguna. Direktif ng-repeat menelusuri 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 kita menggunakan fungsi push array untuk menambahkan Topik yang dimasukkan oleh pengguna melalui variabel 'Topik' ke dalam array 'AllTopic.'

Jika kode contoh formulir AngularJS berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:

Kirim Formulir di AngularJS

Untuk melihat kode yang berfungsi, pertama-tama, masukkan nama Topik seperti “Angular” seperti yang ditunjukkan di atas pada kotak teks lalu klik tombol Kirim.

Kirim Formulir di AngularJS

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

Ringkasan

  • Direktif “ng-submit” digunakan untuk memproses input yang dimasukkan oleh pengguna untuk pengiriman formulir di AngularJS.
  • Proses pengiriman informasi pada halaman web biasanya ditangani oleh event submit di browser web.
  • Penyampaian informasi dapat dilakukan melalui permintaan GET atau POST.
  • Fungsi Display() menambahkan teks ke variabel array yang disebut 'AllTopic.'