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

Anonim

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

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

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

Давайте рассмотрим пример того, как мы можем этого добиться.

В нашем примере отправки и публикации

Мы собираемся представить пользователю текстовое поле, в котором они могут ввести тему, которую они хотят изучать. На странице будет кнопка отправки, при нажатии которой тема будет добавлена ​​в неупорядоченный список.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

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

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

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

Выход:

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

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

Резюме

Директива «ng-submit» используется для обработки ввода, введенного пользователем при отправке формы.