Örnekle AngularJS Formu Gönderme (ng-submit)

Ng-submit kullanarak bir form nasıl gönderilir

Bir web sayfasında bilgi gönderme işlemleri, normalde web tarayıcısındaki gönderme olayı ile gerçekleştirilir. Bu olay normalde kullanıcının bir web sayfasına girmiş olabileceği bilgileri, oturum açma kimlik bilgileri, form verileri, vb. Gibi daha ileri işlemler için sunucuya göndermek için kullanılır. Bilgilerin gönderimi GET veya POST talebi yoluyla yapılabilir.

AngularJS ayrıca uygulamayı tarayıcının gönderme olayına bağlamak için kullanılabilen ng-submit adlı bir yönerge sağlar. Bu nedenle, AngularJS durumunda, gönderme olayında, kontrol cihazının kendi içinde bazı işlemler gerçekleştirebilir ve ardından işlenen bilgileri kullanıcıya görüntüleyebilirsiniz.

Bunu nasıl başarabileceğimize bir örnek verelim.

Gönderi gönderme örneğimizde,

Kullanıcıya öğrenmek istediği konuyu girebileceği bir metin kutusu sunacağız. Sayfada, basıldığında konuyu sırasız bir listeye ekleyen bir gönder düğmesi olacaktır.

Guru99 Global Event
   Enter which topic you would like to learn
   

{{topicname}}

Kod Açıklaması:

1. İlk olarak, "metin kutusu" ve "gönder düğmesi" kontrolünü tutacak olan form HTML etiketimizi açıklıyoruz. Daha sonra "Display ()" işlevini formumuza bağlamak için ng-submit direktifini kullanıyoruz. Bu işlev denetleyicimizde tanımlanacak ve form gönderildiğinde çağrılacaktır.
2. Kullanıcının öğrenmek istediği Konuya gireceği bir metin kontrolümüz var. Bu, denetleyicimizde kullanılacak olan 'Konu' adlı bir değişkene bağlı olacaktır.
3. Kullanıcının istediği konuyu girdiğinde tıklayacağı normal gönder düğmesi vardır.
4. Kullanıcının girdiği konuların liste maddelerini görüntülemek için ng-tekrar direktifini kullandık. Ng-tekrar yönergesi, 'AllTopic' dizisindeki her konuyu ele alır ve konu adını buna göre görüntüler.
5. Denetleyicimizde, 'AllTopic' adlı bir dizi değişkeni bildiriyoruz. Bu, kullanıcı tarafından 2. Adımda girilen tüm konuları tutmak için kullanılacaktır.
6. Kullanıcı Gönder düğmesini her tıkladığında çağrılacak olan Display () işlevimiz için kodu tanımlıyoruz. Burada, kullanıcı tarafından "Konu" değişkeni aracılığıyla girilen Konuları "AllTopic" dizimize eklemek için push dizisi işlevini kullanıyoruz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Kodun çalıştığını görmek için, önce metin kutusuna yukarıda gösterildiği gibi "AngularJS" gibi bir Konu adı girin ve ardından Gönder düğmesine tıklayın.

• Gönder butonu tıklandıktan sonra, metin kutusuna girilen materyalin materyal listesine eklendiğini göreceksiniz.
• Bu, gönder düğmesine basıldığında çağrılan Display () işlevi ile elde edilmektedir.
• Display () işlevi, metni 'AllTopic' adlı dizi değişkenine ekler. Ve ng-tekrar yönergemiz, 'AllTopic' dizi değişkenindeki her bir değeri gözden geçirir ve bunları uygun şekilde liste öğeleri olarak görüntüler.

Özet

"Ng-submit" direktifi, form gönderildiğinde kullanıcı tarafından girilen girdiyi işlemek için kullanılır.