Przesyłanie formularza AngularJS z przykładem (ng-submit)

Anonim

Jak przesłać formularz za pomocą ng-submit

Proces przesyłania informacji na stronie internetowej jest zwykle obsługiwany przez zgłoszenie zdarzenia w przeglądarce internetowej. To zdarzenie jest zwykle używane do wysyłania informacji, które użytkownik mógł wprowadzić na stronie internetowej, do serwera w celu dalszego przetwarzania, takich jak dane logowania, dane formularzy itp. Informacje można przesłać za pomocą żądania GET lub POST.

AngularJS udostępnia również dyrektywę o nazwie ng-submit, której można użyć do powiązania aplikacji ze zdarzeniem przesyłania przeglądarki. Tak więc w przypadku AngularJS, po zdarzeniu przesyłania można przeprowadzić pewne przetwarzanie w samym kontrolerze, a następnie wyświetlić przetworzone informacje użytkownikowi.

Weźmy przykład, jak możemy to osiągnąć.

W naszym przykładzie przesyłania postów

Przedstawimy użytkownikowi pole tekstowe, w którym może wpisać temat, którego chce się nauczyć. Na stronie będzie znajdował się przycisk przesyłania, którego naciśnięcie doda temat do nieuporządkowanej listy.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Objaśnienie kodu:

  1. Najpierw deklarujemy nasz tag HTML formularza, który będzie zawierał kontrolkę „pole tekstowe” i „przycisk przesyłania”. Następnie używamy dyrektywy ng-submit, aby powiązać funkcję „Display ()” z naszym formularzem. Ta funkcja zostanie zdefiniowana w naszym kontrolerze i zostanie wywołana po przesłaniu formularza.
  2. Mamy kontrolkę tekstową, w której użytkownik wprowadzi temat, którego chce się nauczyć. Będzie to powiązane ze zmienną o nazwie „Temat”, która będzie używana w naszym kontrolerze.
  3. Istnieje normalny przycisk przesyłania, który użytkownik kliknie po wprowadzeniu żądanego tematu.
  4. Użyliśmy dyrektywy ng-repeat do wyświetlenia elementów listy tematów wprowadzanych przez użytkownika. Dyrektywa ng-repeat przechodzi przez każdy temat w tablicy „AllTopic” i odpowiednio wyświetla nazwę tematu.
  5. W naszym kontrolerze deklarujemy zmienną tablicową o nazwie „AllTopic”. Będzie on używany do przechowywania wszystkich tematów wprowadzonych przez użytkownika w kroku 2.
  6. Definiujemy kod dla naszej funkcji Display (), która będzie wywoływana za każdym razem, gdy użytkownik kliknie przycisk Prześlij. Tutaj używamy funkcji push array, aby dodać tematy wprowadzone przez użytkownika za pomocą zmiennej „Topic” do naszej tablicy „AllTopic”.

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

Aby sprawdzić, czy kod działa, najpierw wprowadź w polu tekstowym nazwę tematu, na przykład „AngularJS”, jak pokazano powyżej, a następnie kliknij przycisk Prześlij.

  • Po kliknięciu przycisku przesyłania zobaczysz pozycję, która została wprowadzona w polu tekstowym dodanym do listy pozycji.
  • Osiąga się to za pomocą funkcji Display (), która jest wywoływana po naciśnięciu przycisku wysyłania.
  • Funkcja Display () dodaje tekst do zmiennej tablicowej o nazwie „AllTopic”. Nasza dyrektywa ng-repeat sprawdza każdą wartość w zmiennej tablicowej „AllTopic” i wyświetla je odpowiednio jako elementy listy.

Podsumowanie

Dyrektywa „ng-submit” służy do przetwarzania danych wprowadzonych przez użytkownika podczas przesyłania formularza.