AngularJS ng-submit із прикладом надсилання форми
Директива AngularJS ng-submit
Команда ng-подати Директива в AngularJS використовується для прив’язки програми до події відправлення браузера. Так у випадку з AngularJS у події submit ви можете виконати певну обробку в самому контролері, а потім відобразити оброблену інформацію користувачеві.
Як подати форму в AngularJS за допомогою ng-submit
Процеси надсилання інформації на веб-сторінку зазвичай обробляються подією надсилання у веб-браузері. Ця подія зазвичай використовується для надсилання інформації, яку користувач міг ввести на веб-сторінці, на сервер для подальшої обробки, як-от облікові дані для входу, дані форми тощо. Надсилання інформації може здійснюватися за допомогою запиту GET або POST.
Давайте розглянемо приклад надсилання форм у Angular, щоб побачити, як надсилати форми в AngularJS.
У нашому прикладі надсилання форми AngularJS ми надамо користувачеві текстове поле, у якому вони можуть ввести тему, яку хочуть вивчити. На сторінці буде кнопка надсилання, натискання якої додасть тему до невпорядкованого списку.

Приклад надсилання форми 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()"> 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-тег нашої форми, який буде містити елементи керування «текстове поле» та «кнопка надсилання», як показано у прикладі події надсилання форми Angular. Потім ми використовуємо директиву ngsubmit Angular, щоб прив’язати функцію «Display()» до нашої форми. Ця функція буде визначена в нашому контролері та буде викликана під час надсилання форми.
- У нас є текстовий елемент керування, у якому користувач вводить тему, яку хоче вивчити. Це буде прив’язано до змінної під назвою «Тема», яка використовуватиметься в нашому контролері.
- В AngularJS є звичайна кнопка надсилання, яку користувач натискає, коли вводить потрібну тему.
- Ми використали ng-повтор директива для відображення елементів списку тем, які вводить користувач. Директива ng-repeat переглядає кожну тему в масиві "AllTopic" і відображає назву теми відповідно.
- У нашому контролері ми оголошуємо змінну масиву під назвою "AllTopic". Це буде використано для зберігання всіх тем, введених користувачем у кроці 2.
- Ми визначаємо код для нашої функції Display(), яка буде викликатися кожного разу, коли користувач натискає кнопку «Надіслати». Тут ми використовуємо функцію push array, щоб додати теми, введені користувачем за допомогою змінної «Topic», до нашого масиву «AllTopic».
Якщо приклад коду форми AngularJS виконано успішно, під час запуску коду в браузері буде показано наступний результат.
вихід:
Щоб побачити, як працює код, спочатку введіть назву теми, як-от «Angular», як показано вище, у текстовому полі, а потім натисніть кнопку «Надіслати».
- Після натискання кнопки «Надіслати» ви побачите елемент, який було введено в текстове поле, доданий до списку елементів.
- Це досягається за допомогою функції Display(), яка викликається, коли натискається кнопка відправки.
- Функція Display() додає текст до змінної масиву під назвою "AllTopic". І наша директива ng-repeat переглядає кожне значення у змінній масиву "AllTopic" і відображає їх як елементи списку відповідно.
Підсумки
- Директива «ng-submit» використовується для обробки даних, введених користувачем для надсилання форми в AngularJS.
- Процеси надсилання інформації на веб-сторінку зазвичай обробляються подією надсилання у веб-браузері.
- Надіслати інформацію можна за допомогою запиту GET або POST.
- Функція Display() додає текст до змінної масиву під назвою "AllTopic".