AngularJS ng-submit с примером отправки формы

Автор: Джеймс Хартман Джеймс Хартман
Hours обновлено

Директива AngularJS ng-submit

Команда ng-отправить Директива в AngularJS используется для привязки приложения к событию отправки браузера. Так что в случае AngularJS в событии отправки вы можете выполнить некоторую обработку внутри самого контроллера, а затем отобразить обработанную информацию пользователю.

Как отправить форму в AngularJS с помощью ng-submit

Процессы отправки информации на веб-странице обычно обрабатываются событием отправки в веб-браузере. Это событие обычно используется для отправки информации, которую пользователь мог ввести на веб-странице, на сервер для дальнейшей обработки, например, учетные данные для входа, данные формы и т. д. Отправка информации может осуществляться посредством запроса GET или POST.

Давайте возьмем пример отправки формы Angular, чтобы увидеть, как отправлять формы в AngularJS.

В нашем примере отправки формы AngularJS мы собираемся предоставить пользователю текстовое поле, в котором он сможет ввести тему, которую хочет изучить. На странице будет кнопка «Отправить», при нажатии которой тема будет добавлена ​​в неупорядоченный список.

Отправьте форму в AngularJS с помощью ng-submit
Отправка формы в AngularJS с помощью ng-submit

Пример отправки формы AngularJS

Теперь мы увидим пример отправки формы AngularJS из контроллера с использованием директивы 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>

Пояснение к коду:

  1. Сначала мы объявляем HTML-тег нашей формы, который будет содержать элементы управления «текстовое поле» и «кнопку отправки», как показано в примере события отправки формы Angular. Затем мы используем директиву ngsubmit Angular для привязки функции Display() к нашей форме. Эта функция будет определена в нашем контроллере и будет вызываться при отправке формы.
  2. У нас есть текстовый элемент управления, в котором пользователь вводит тему, которую хочет изучить. Это будет связано с переменной «Тема», которая будет использоваться в нашем контроллере.
  3. В AngularJS есть обычная кнопка отправки, которую пользователь нажмет, когда войдет в нужную тему.
  4. Мы использовали нг-повторить Директива для отображения элементов списка тем, которые вводит пользователь. Директива ng-repeat проходит по каждой теме в массиве AllTopic и отображает соответствующее имя темы.
  5. В нашем контроллере мы объявляем переменную массива под названием AllTopic. Он будет использоваться для хранения всех тем, введенных пользователем на шаге 2.
  6. Мы определяем код для нашей функции Display(), которая будет вызываться всякий раз, когда пользователь нажимает кнопку «Отправить». Здесь мы используем функцию push array, чтобы добавить темы, введенные пользователем через переменную «Тема», в наш массив «AllTopic».

Если пример кода формы AngularJS выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:

Отправьте форму в AngularJS

Чтобы увидеть работающий код, сначала введите название темы, например «Angular», как показано выше, в текстовом поле, а затем нажмите кнопку «Отправить».

Отправьте форму в AngularJS

  • После нажатия кнопки «Отправить» вы увидите элемент, введенный в текстовое поле, добавленный в список элементов.
  • Это достигается с помощью функции Display(), которая вызывается при нажатии кнопки отправки.
  • Функция Display() добавляет текст в переменную массива с именем AllTopic. И наша директива ng-repeat проходит через каждое значение в переменной массива AllTopic и отображает их как элементы списка соответственно.

Резюме

  • Директива «ng-submit» используется для обработки ввода, введенного пользователем для отправки формы в AngularJS.
  • Процессы отправки информации на веб-странице обычно обрабатываются событием отправки в веб-браузере.
  • Отправка информации может осуществляться посредством запроса GET или POST.
  • Функция Display() добавляет текст в переменную массива с именем AllTopic.