Изпращане на формуляр 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 (), който ще се извиква всеки път, когато потребителят щракне върху бутона Submit. Тук използваме функцията push array за добавяне на теми, въведени от потребителя чрез променливата „Topic“ в нашия масив „AllTopic“.

Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.

Изход:

За да видите кода да работи, първо въведете име на тема като "AngularJS", както е показано по-горе в текстовото поле и след това щракнете върху бутона Изпращане.

  • След като щракнете върху бутона за изпращане, ще видите елемента, който е бил въведен в текстовото поле, добавен към списъка с елементи.
  • Това се постига чрез функцията Display (), която се извиква при натискане на бутона за подаване.
  • Функцията Display () добавя текста към променливата на масива, наречена „AllTopic“. И нашата директива ng-repeat преминава през всяка стойност в променливата на масива „AllTopic“ и ги показва съответно като елементи от списъка.

Обобщение

Директивата "ng-submit" се използва за обработка на въведените от потребителя данни при подаване на формуляра.