Подношење обрасца АнгуларЈС са примером (нг-субмит)

Anonim

Како послати образац помоћу нг-субмит

Процесима слања информација на веб страници обично управља догађај слања у веб прегледачу. Овај догађај се обично користи за слање информација које је корисник можда унео на веб страницу на сервер за даљу обраду, као што су акредитиви за пријаву, подаци обрасца итд. Подношење информација може се извршити путем ГЕТ или ПОСТ захтева.

АнгуларЈС такође обезбеђује директиву звану нг-субмит која се може користити за повезивање апликације са догађајем субмит прегледача. Дакле, у случају АнгуларЈС, на догађају слања можете извршити одређену обраду унутар самог контролера, а затим приказати обрађене информације кориснику.

Узмимо пример како то можемо постићи.

У нашем примеру примера слања,

Кориснику ћемо представити оквир за текст у којем може да унесе тему коју жели да научи. На страници ће бити дугме за слање, које ће притиском додати тему на неуређену листу.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Објашњење кода:

  1. Прво декларишемо ХТМЛ ознаку обрасца која ће садржати контролу „оквир за текст“ и „дугме за слање“. Затим користимо нг-субмит директиву да везујемо функцију „Дисплаи ()“ на наш образац. Ова функција ће бити дефинисана у нашем контролору и позваће се када се образац преда.
  2. Имамо контролу над текстом у којој ће корисник унети тему коју жели да научи. Ово ће бити повезано са променљивом која се назива „Тема“ и која ће се користити у нашем контролеру.
  3. Постоји нормално дугме за слање на које ће корисник кликнути када уђе у тему коју жели.
  4. Користили смо директиву нг-репеат за приказ ставки листе тема које корисник уноси. Директива нг-репеат пролази кроз сваку тему у низу 'АллТопиц' и приказује назив теме у складу с тим.
  5. У нашем контролеру декларишемо променљиву низа која се зове „АллТопиц“. Ово ће се користити за задржавање свих тема које је корисник унео у корак 2.
  6. Дефинишемо код за нашу функцију Дисплаи () која ће се позвати сваки пут када корисник кликне на дугме Пошаљи. Овде користимо функцију пусх низа за додавање тема које је корисник унео путем променљиве „Топиц“ у наш низ „АллТопиц“.

Ако се код успешно изврши, следећи излаз ће се приказати када покренете свој код у прегледачу.

Излаз:

Да бисте видели како код делује, прво унесите име теме попут "АнгуларЈС" као што је приказано горе у текстуално поље, а затим кликните на дугме Пошаљи.

  • Након што се кликне на дугме за слање, видећете ставку која је унета у оквир за текст који је додат на листу ставки.
  • То се постиже функцијом Дисплаи () која се позива када се притисне дугме за слање.
  • Функција Дисплаи () додаје текст променљивој низа која се зове „АллТопиц“. А наша нг-репеат директива пролази кроз сваку вредност у променљивој низа 'АллТопиц' и приказује их у складу са тим као ставке листе.

Резиме

Директива „нг-субмит“ се користи за обраду уноса који је унео корисник приликом слања обрасца.