Подання форми 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 array для додавання тем, введених користувачем за допомогою змінної 'Topic', до нашого масиву 'AllTopic'.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

Вихід:

Щоб побачити, як працює код, спочатку введіть ім’я теми, наприклад «AngularJS», як показано вище, у текстовому полі, а потім натисніть кнопку Надіслати.

  • Після натискання кнопки «Відправити» ви побачите елемент, який був введений у текстове поле, доданий до списку елементів.
  • Це досягається функцією Display (), яка викликається при натисканні кнопки подання.
  • Функція Display () додає текст до змінної масиву, що називається "AllTopic". І наша директива ng-repeat проходить кожне значення у змінній масиву 'AllTopic' і відповідно відображає їх як елементи списку.

Резюме

Директива "ng-submit" використовується для обробки вводу, введеного користувачем під час подання форми.