AngularJS ng-submit z przykładem przesyłania formularza

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

Dyrektywa AngularJS dotycząca przesyłania

ng-prześlij dyrektywa w AngularJS służy do powiązania aplikacji ze zdarzeniem przesyłania przeglądarki. Zatem w przypadku angularjs w zdarzeniu przesyłania możesz przeprowadzić pewne przetwarzanie w samym kontrolerze, a następnie wyświetlić przetworzone informacje użytkownikowi.

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

Procesy przesyłania informacji na stronie internetowej są zwykle obsługiwane przez zdarzenie przesyłania 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. Przesyłanie informacji może odbywać się za pomocą żądania GET lub POST.

Weźmy przykład przesyłania formularza Angular, aby zobaczyć, jak przesyłać formularze w AngularJS.

W naszym przykładzie AngularJS form submit pokażemy użytkownikowi pole tekstowe, w którym może wpisać temat, którego chce się nauczyć. Na stronie będzie przycisk Submit, który po naciśnięciu doda temat do nieuporządkowanej listy.

Prześlij formularz w AngularJS za pomocą ng-submit
Przesyłanie formularza w AngularJS za pomocą ng-submit

Przykład przesłania formularza AngularJS

Teraz zobaczymy przykład przesyłania formularza AngularJS z kontrolera przy użyciu dyrektywy 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>

Wyjaśnienie kodu:

  1. Najpierw deklarujemy nasz znacznik HTML formularza, który będzie zawierał kontrolkę „pole tekstowe” i „przycisk przesyłania”, jak pokazano w przykładzie zdarzenia przesyłania formularza Angular. Następnie używamy dyrektywy Angular ngsubmit, 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 wpisuje Temat, którego chce się uczyć. Będzie to powiązane ze zmienną o nazwie „Temat”, która będzie używana w naszym kontrolerze.
  3. W AngularJS znajduje się normalny przycisk przesyłania, który użytkownik kliknie po wprowadzeniu żądanego tematu.
  4. Korzystaliśmy z ng-powtórz dyrektywa wyświetlająca elementy listy tematów wprowadzonych przez użytkownika. Dyrektywa ng-repeat przegląda 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 naszej funkcji Display(), która będzie wywoływana za każdym razem, gdy użytkownik kliknie przycisk Wyślij. Tutaj używamy funkcji tablicy push, aby dodać tematy wprowadzone przez użytkownika za pomocą zmiennej „Temat” do naszej tablicy „AllTopic”.

Jeśli przykładowy kod formularza AngularJS zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik.
Wyjście:

Prześlij formularz w AngularJS

Aby zobaczyć działający kod, najpierw wpisz nazwę tematu, np. „Angular”, jak pokazano powyżej, w polu tekstowym, a następnie kliknij przycisk Prześlij.

Prześlij formularz w AngularJS

  • Po kliknięciu przycisku „Prześlij” zobaczysz, że element wpisany w polu tekstowym został dodany do listy elementów.
  • 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 przegląda każdą wartość zmiennej tablicowej „AllTopic” i odpowiednio wyświetla ją jako elementy listy.

Podsumowanie

  • Dyrektywa „ng-submit” służy do przetwarzania danych wejściowych wprowadzonych przez użytkownika w celu przesłania formularza w AngularJS.
  • Procesy przesyłania informacji na stronie internetowej są zwykle obsługiwane przez zdarzenie przesyłania w przeglądarce internetowej.
  • Przesyłanie informacji może odbywać się poprzez żądanie GET lub POST.
  • Funkcja Display() dodaje tekst do zmiennej tablicowej o nazwie „AllTopic”.