AngularJS Form Odeslat s příkladem (ng-submit)

Anonim

Jak odeslat formulář pomocí ng-submit

Procesy odesílání informací na webové stránce obvykle zpracovává událost odeslání ve webovém prohlížeči. Tato událost se obvykle používá k odeslání informací, které uživatel mohl zadat na webové stránce, k dalšímu zpracování, jako jsou přihlašovací údaje, údaje formulářů atd. Odeslání informací lze provést prostřednictvím požadavku GET nebo POST.

AngularJS také poskytuje směrnici nazvanou ng-submit, kterou lze použít k vytvoření vazby aplikace na událost odeslání prohlížeče. Takže v případě AngularJS můžete na události odeslání provést nějaké zpracování v samotném řadiči a poté zobrazit zpracované informace uživateli.

Vezměme si příklad toho, jak toho můžeme dosáhnout.

V našem příkladu odeslání příspěvku

Uživateli představíme textové pole, ve kterém může zadat téma, které se chce naučit. Na stránce bude tlačítko pro odeslání, které po stisknutí přidá téma do neuspořádaného seznamu.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Vysvětlení kódu:

  1. Nejprve deklarujeme naši značku HTML formuláře, která bude obsahovat ovládací prvky „textové pole“ a „tlačítko odeslat“. Poté použijeme direktivu ng-submit k vytvoření vazby funkce "Display ()" na náš formulář. Tato funkce bude definována v našem kontroléru a bude vyvolána při odeslání formuláře.
  2. Máme textový ovládací prvek, ve kterém uživatel zadá téma, které se chce naučit. To bude vázáno na proměnnou nazvanou 'Téma', která bude použita v našem kontroléru.
  3. K dispozici je normální tlačítko Odeslat, na které uživatel klikne, když zadá požadované téma.
  4. Pro zobrazení položek seznamu témat, která uživatel zadá, jsme použili direktivu ng-repeat. Direktiva ng-repeat prochází každým tématem v poli 'AllTopic' a podle toho zobrazuje název tématu.
  5. V našem řadiči deklarujeme proměnnou pole nazvanou „AllTopic“. To se použije k zadržení všech témat zadaných uživatelem v kroku 2.
  6. Definujeme kód pro naši funkci Display (), který bude vyvolán, kdykoli uživatel klikne na tlačítko Odeslat. Tady používáme funkci push array k přidání témat zadaných uživatelem prostřednictvím proměnné „Topic“ do našeho pole „AllTopic“.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Chcete-li, aby kód fungoval, nejprve do textového pole zadejte název tématu, například „AngularJS“, jak je uvedeno výše, a poté klikněte na tlačítko Odeslat.

  • Po kliknutí na tlačítko Odeslat uvidíte položku, která byla zadána do textového pole, přidána do seznamu položek.
  • Toho je dosaženo funkcí Display (), která se volá po stisknutí tlačítka Odeslat.
  • Funkce Display () přidá text do proměnné pole s názvem „AllTopic“. A naše direktiva ng-repeat prochází každou hodnotou v proměnné pole 'AllTopic' a podle toho je zobrazuje jako položky seznamu.

souhrn

Směrnice „ng-submit“ se používá ke zpracování vstupu zadaného uživatelem při odeslání formuláře.