AngularJS veidlapas iesniegšanas piemērs [iesniegt]

Ievadiet tēmu, kuru vēlaties apgūt
  • {{topicname}}
var sampleApp = angular.module ('sampleApp', []); sampleApp.controller ('AngularController', function ($ ulatis) {$ ulatums.AllTopic = []; $ darbības joma.Display = funkcija () {$ darbības joma.AllTopic.push ($ tvērums);}});

Koda skaidrojums:

  1. Mēs vispirms deklarējam mūsu veidlapas HTML tagu, kurā būs vadīklas “tekstlodziņš” un “Iesniegt poga”, kā parādīts veidlapas iesniegšanas AngularJS piemērā. Pēc tam mēs izmantojam ngsubmit Angular direktīvu, lai saistītu funkciju “Display ()” ar mūsu veidlapu. Šī funkcija tiks definēta mūsu kontrolierī un tiks izsaukta, kad veidlapa tiks iesniegta.
  2. Mums ir teksta vadīkla, kurā lietotājs ievadīs tēmu, kuru vēlas apgūt. Tas tiks saistīts ar mainīgo ar nosaukumu “Tēma”, kas tiks izmantots mūsu kontrollerī.
  3. Ir parastā iesniegšanas poga, uz kuras lietotājs noklikšķinās, kad būs ievadījis vēlamo tēmu.
  4. Mēs esam izmantojuši direktīvu ng-atkārtot, lai parādītu lietotāja ievadīto tēmu sarakstu vienumus. Atkārtošanas direktīva iet cauri katrai masīva “AllTopic” tēmai un attiecīgi parāda tēmas nosaukumu.
  5. Mūsu kontrollerī mēs deklarējam masīva mainīgo ar nosaukumu “AllTopic”. Tas tiks izmantots, lai turētu visas tēmas, kuras lietotājs ievadījis 2. darbībā.
  6. Mēs definējam savas displeja () funkcijas kodu, kas tiks izsaukts ikreiz, kad lietotājs noklikšķinās uz pogas Iesniegt. Šeit mēs izmantojam push masīva funkciju, lai pievienotu tēmas, kuras lietotājs ievadījis, izmantojot mainīgo “Topic”, mūsu masīvam “AllTopic”.

Ja kods ir izpildīts veiksmīgi, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izvade.

Izeja:

Lai redzētu, ka kods darbojas, vispirms tekstlodziņā ievadiet tēmas nosaukumu, piemēram, “leņķiskais”, un pēc tam noklikšķiniet uz pogas Iesniegt.

  • Pēc noklikšķināšanas uz pogas Iesniegt jūs redzēsit vienumu, kas tika ievadīts tekstlodziņā, kas pievienots vienumu sarakstam.
  • Tas tiek panākts ar funkciju Display (), kas tiek izsaukta, nospiežot iesniegšanas pogu.
  • Funkcija Displejs () pievieno tekstu masīva mainīgajam ar nosaukumu “AllTopic”. Un mūsu ng atkārtošanas direktīva iziet katru vērtību masīva mainīgajā “AllTopic” un attiecīgi parāda tos kā saraksta vienumus.

Kopsavilkums

  • Direktīva “ng-iesniegt” tiek izmantota, lai apstrādātu ievadi, ko lietotājs ievadījis veidlapas iesniegšanai AngularJS.
  • Informācijas iesniegšanas procesus tīmekļa lapā parasti apstrādā iesniegšanas notikums tīmekļa pārlūkprogrammā.
  • Informāciju var iesniegt, izmantojot GET vai POST pieprasījumu.
  • Funkcija Displejs () pievieno tekstu masīva mainīgajam ar nosaukumu “AllTopic”.