Как отправить форму с помощью ng-submit
Процессы отправки информации на веб-странице обычно обрабатываются событием отправки в веб-браузере. Это событие обычно используется для отправки информации, которую пользователь мог ввести на веб-странице, на сервер для дальнейшей обработки, такой как учетные данные для входа, данные формы и т. Д. Передача информации может быть выполнена с помощью запроса GET или POST.
AngularJS также предоставляет директиву ng-submit, которую можно использовать для привязки приложения к событию submit браузера. Так, в случае AngularJS, в случае события 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()">
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>
Объяснение кода:
- Сначала мы объявляем наш HTML-тег формы, который будет содержать элементы управления «текстовое поле» и «кнопка отправки». Затем мы используем директиву ng-submit, чтобы связать функцию «Display ()» с нашей формой. Эта функция будет определена в нашем контроллере и будет вызываться при отправке формы.
- У нас есть текстовый элемент управления, в котором пользователь вводит тему, которую он хочет изучить. Это будет связано с переменной «Тема», которая будет использоваться в нашем контроллере.
- Существует обычная кнопка отправки, которую пользователь нажимает, когда вводит тему, которую он хочет.
- Мы использовали директиву ng-repeat для отображения элементов списка тем, которые вводит пользователь. Директива ng-repeat просматривает каждую тему в массиве «AllTopic» и отображает название темы соответственно.
- В нашем контроллере мы объявляем переменную массива с именем «AllTopic». Это будет использоваться для хранения всех тем, введенных пользователем на шаге 2.
- Мы определяем код для нашей функции Display (), которая будет вызываться всякий раз, когда пользователь нажимает кнопку «Отправить». Здесь мы используем функцию массива push, чтобы добавить темы, введенные пользователем через переменную «Topic», в наш массив «AllTopic».
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
Чтобы увидеть, как работает код, сначала введите название темы, например «AngularJS», как показано выше в текстовом поле, а затем нажмите кнопку «Отправить».
- После нажатия кнопки отправки вы увидите элемент, который был введен в текстовое поле, добавленное в список элементов.
- Это достигается функцией Display (), которая вызывается при нажатии кнопки отправки.
- Функция Display () добавляет текст в переменную массива с именем «AllTopic». И наша директива ng-repeat просматривает каждое значение в переменной массива ‘AllTopic’ и отображает их как элементы списка соответственно.
Резюме
Директива ng-submit используется для обработки ввода, введенного пользователем при отправке формы.