AngularJS - Innganger i skjemaer

Skjema datahåndtering

I webapplikasjoner er den mest naturlige måten å skaffe brukerdata gjennom skjemaer, med dem kan vi lage elementer som fanger opp tekst eller enkle bekreftelser som avmerkingsbokser, men alt dette kan oversettes til brukerdata, med dem kan vi gjøre forskjellig behandling.
I AngularJS Å jobbe med disse datainngangene er veldig enkelt, siden vi på grunn av måten biblioteket ble designet på, kan omdanne deler av disse dataene vi mottar til handlinger i applikasjonen vår, enten for å gjøre beregninger eller for å definere dens oppførsel.
I denne delen vil vi se litt mer om hvordan du håndterer innspill i skjemaer ved hjelp av AngularJS.
Hvordan virker det?Måten vi kan gjøre foreningen mellom inngangselementene og logikken vår på AngularJS er veldig enkelt, må vi bruke eiendommen ng-modell og alt vil ta et slags forhold, så verdien av det vi skriver inn med form kan manipuleres i AngularJS, kan dette gjelde for input tekst, radioknapper, avkrysningsboks, etc..
La oss se nedenfor et lite eksempel på det vi forklarer:

Det som skjer her er det innenfor rammen av Vår kontroller vi kan manipulere hva brukeren gjør i avmerkingsboks for markør, så hvis brukeren merker det, vil vi umiddelbart motta markør som sant, og hvis du fjerner merket for det, får vi det motsatte svaret.
Vi kan gå litt lenger, og vi kan sette inn Vår kontroller at markør er merket som standard, og når brukeren ser siden for første gang, blir avmerkingsboksen merket.
Legg til handlinger
Men ikke bare for å fange opp dataene vi må beholde, vi kan og vi må inkludere handlinger når vi mottar innspillene, i AngularJS Vi kan kalle funksjoner og metoder som blir utført i tilfelle av inputelementet vårt, for eksempel skal vi lage en liten kalkulator som tar investeringsestimatet for å gjøre et foretak. Det vi skal gjøre er å multiplisere den mottatte verdien med 10, la oss se:
1- Først må vi etablere HTML-elementene som vi skal bruke, ettersom vi i det forrige eksemplet skal lage en kontroller og input kommer til å være en del av modellen vår:

FORSTØRRE

2- Vi ser at vi har introdusert en ny eiendom ng-endring og vi har tilordnet samtalen til en funksjon som heter calculoInversion () Dette betyr at hver gang vårt inndatafelt endres, vil funksjonen bli kalt, som vi kan se er det noe veldig enkelt.
3- Nå skal vi bygge koden med AngularJS som vil gi liv til det vi har sett:

4- Vi bygger den riktige kontrolleren, så angir vi en startverdi for modellen, i dette tilfellet likestiller vi den med 0, dette inkluderer begge elementene begge Estimert initial Hva nødvendig, så lager vi funksjonen calculoInversion () Vi ser at vi gjør det i det såkalte omfanget av vår kontroller, på denne måten er det knyttet til elementet vårt. Med dette bør applikasjonen vår fungere på et grunnleggende nivå.
Selvfølgelig mangler dette eksemplet flere valideringer og tas kun i betraktning når brukeren endrer verdien på inndatateksten, men det fungerer som en introduksjon for å inkludere handlinger i applikasjonene våre skrevet med AngularJS.
Tidligereside 1 av 2Neste