AngularJS - Inmatningar i formulär

Hantering av formulärdata

I webbapplikationer är det mest naturliga sättet att få användardata genom formulär, med dem kan vi skapa element som fångar text eller enkla bekräftelser som kryssrutor, men allt detta kan översättas som användardata, med dem kan vi göra olika bearbetningar.
I AngularJS Att arbeta med dessa datainmatningar är mycket enkelt, eftersom vi på grund av hur biblioteket utformades kan omvandla en del av denna data som vi tar emot till handlingar i vår applikation, antingen för att göra beräkningar eller för att definiera dess beteende.
I det här avsnittet kommer vi att se lite mer om hur man hanterar inmatning i formulär med AngularJS.
Hur fungerar det?Hur vi kan få föreningen mellan ingångselementen och vår logik AngularJS är väldigt enkelt måste vi använda fastigheten ng-modell och allt kommer att ta ett slags förhållande, så värdet av det vi anger med form kan manipuleras i AngularJS, kan detta gälla inmatningstext, alternativknappar, kryssruta, etc..
Låt oss se nedan ett litet exempel på vad vi förklarar:

Vad som händer här är det inom ramen för Vår Controller vi kan manipulera vad användaren gör i markeringsruta, då om användaren markerar det, får vi omedelbart markör som sant och om du avmarkerar det får vi motsatt svar.
Vi kan gå lite längre och vi kan gå in Vår Controller det där markör är markerad som standard, då markeras kryssrutan när användaren ser sidan för första gången.
Lägg till åtgärder
Men inte bara för att fånga den information vi måste stanna, vi kan och vi måste inkludera åtgärder när vi får inmatningarna, i AngularJS Vi kan kalla funktioner och metoder som utförs i händelse av vårt inmatningselement, till exempel kommer vi att göra en liten räknare som tar investeringsuppskattningen för att göra ett åtagande, vad vi kommer att göra är att multiplicera det mottagna värdet med 10, låt oss ser:
1- Först måste vi fastställa HTML-elementen som vi ska använda, eftersom vi i det föregående exemplet ska skapa en kontroller och input kommer att vara en del av vår modell:

FÖRSTORA

2- Vi ser att vi har introducerat en ny fastighet ng-förändring och vi har tilldelat samtalet till en funktion som kallas calculoInversion () Detta innebär att varje gång vårt inmatningsfält ändras kommer funktionen att kallas, som vi kan se är det något väldigt enkelt.
3- Nu ska vi bygga koden med AngularJS som kommer att ge liv åt det vi har sett:

4- Vi bygger rätt styrenhet, sedan anger vi ett initialvärde för modellen, i det här fallet likställer vi det med 0, detta inkluderar båda elementen båda Uppskattad initial Vad nödvändig, då skapar vi funktionen calculoInversion () Vi ser att vi gör det i den så kallade omfattningen av vår controller, på detta sätt är det associerat med vårt element. Med detta bör vår applikation fungera på en grundläggande nivå.
Naturligtvis saknar detta exempel flera valideringar och tar bara hänsyn när användaren ändrar värdet på inmatningstexten, men det fungerar som en introduktion för att inkludera åtgärder i våra applikationer skrivna med AngularJS.
Tidigaresida 1 av 2Nästa