AngularJS - input i formularer

Form Datahåndtering

I webapplikationer er den mest naturlige måde at opnå brugerdata gennem formularer, med dem kan vi oprette elementer, der fanger tekst eller enkle bekræftelser som f.eks. Afkrydsningsfelter, men alt dette kan oversættes som brugerdata, med dem kan vi udføre forskellig behandling.
I VinkelJS At arbejde med disse datainput er meget enkelt, da vi på grund af den måde, biblioteket blev designet på, kan omdanne en del af disse data, som vi modtager, til handlinger i vores applikation, enten for at foretage beregninger eller for at definere dets adfærd.
I dette afsnit vil vi se lidt mere om, hvordan man håndterer input i formularer ved hjælp af AngularJS.
Hvordan virker det?Den måde, vi kan skabe foreningen mellem inputelementerne og vores logik på VinkelJS er meget enkel, skal vi bruge ejendommen ng-model og alt vil tage en slags relation, så værdien af ​​det, vi indtaster med form, kan manipuleres i VinkelJS, kan dette gælde for inputtekst, radioknapper, afkrydsningsfelt osv.
Lad os se nedenfor et lille eksempel på, hvad vi forklarer:

Hvad der sker her er det inden for rammerne af Vores controller vi kan manipulere med, hvad brugeren gør i markeringsfelt, så hvis brugeren markerer det, modtager vi straks markør som sandt, og hvis du fjerner markeringen, har vi det modsatte svar.
Vi kan gå lidt længere, og vi kan sætte ind Vores controller at markør er markeret som standard, så vil afkrydsningsfeltet markeres, når brugeren ser siden for første gang.
Tilføj handlinger
Men ikke kun for at fange de data, vi skal blive, vi kan og vi skal inkludere handlinger, når vi modtager input, i VinkelJS Vi kan kalde funktioner og metoder, der udføres i tilfælde af vores inputelement, for eksempel vil vi lave en lille lommeregner, der tager investeringsestimatet for at lave en virksomhed, hvad vi vil gøre er at gange den modtagne værdi med 10, lad os se:
1- Først skal vi etablere de HTML-elementer, vi skal bruge, da vi i det foregående eksempel skal oprette en controller og input vil være en del af vores model:

FORSTØRRE

2- Vi ser, at vi har introduceret en ny ejendom ng-ændring og vi har tildelt opkaldet til en funktion kaldet calculoInversion () Det betyder, at hver gang vores inputfelt ændres, kaldes funktionen, som vi kan se, er det noget meget enkelt.
3- Nu skal vi bygge koden med VinkelJS det vil give liv til det, vi har set:

4- Vi bygger den relevante controller, så angiver vi en startværdi for modellen, i dette tilfælde sidestiller vi den med 0, dette inkluderer begge elementer begge Estimeret initial Hvad nødvendig, så opretter vi funktionen calculoInversion () Vi ser, at vi gør det i det såkaldte omfang af vores controller, på denne måde er det forbundet med vores element. Med dette bør vores applikation fungere på et grundlæggende niveau.
Selvfølgelig mangler dette eksempel flere valideringer og tager kun hensyn til, når brugeren ændrer værdien af ​​inputteksten, men det fungerer som en introduktion til at inkludere handlinger i vores applikationer skrevet med VinkelJS.
Tidligereside 1 af 2Næste