Příklad odeslání formuláře AngularJS [odeslat]

Zadejte téma, které byste se chtěli naučit
  • {{topicname}}
var sampleApp = angular.module ('sampleApp', []); sampleApp.controller ('AngularController', function ($ scope) {$ scope.AllTopic = []; $ scope.Display = function () {$ scope.AllTopic.push ($ scope.Topic);}});

Vysvětlení kódu:

  1. Nejprve deklarujeme naši značku HTML formuláře, která bude obsahovat ovládací prvek 'textové pole' a 'tlačítko Odeslat', jak je ukázáno v příkladu odeslání formuláře AngularJS. Poté pomocí směrnice ngsubmit Angular svážeme funkci 'Display ()' s naším formulářem. Tato funkce bude definována v našem ovladači 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 řadiči.
  3. Existuje normální tlačítko pro odeslání, na které uživatel klikne, když zadá požadované téma.
  4. Použili jsme direktivu ng-repeat k zobrazení položek seznamu témat, která uživatel zadá. Směrnice 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'. Toto bude použito k uchování všech témat zadaných uživatelem v kroku 2.
  6. Definujeme kód pro naši funkci Display (), která bude volána vždy, když uživatel klikne na tlačítko Odeslat. Tady používáme funkci push array k přidání témat zadaných uživatelem pomocí proměnné 'Téma' ​​do našeho pole 'AllTopic'.

Pokud je kód úspěšně spuštěn, 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 zadejte do textového pole název tématu jako 'Angular', 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řidaného do seznamu položek.
  • Toho je dosaženo funkcí Display (), která se vyvolá po stisknutí tlačítka pro odeslání.
  • Funkce Display () přidá text do proměnné pole s názvem „AllTopic“. A naše směrnice 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 pro odeslání formuláře v AngularJS.
  • Procesy odesílání informací na webové stránky jsou obvykle zpracovávány událostí odeslání ve webovém prohlížeči.
  • Informace lze odeslat prostřednictvím požadavku GET nebo POST.
  • Funkce Display () přidá text do proměnné pole s názvem „AllTopic“.