AngularJS - Invoer in formulieren

Formuliergegevensbeheer

In webapplicaties is de meest natuurlijke manier om gebruikersgegevens te verkrijgen via formulieren, waarmee we elementen kunnen maken die tekst of eenvoudige bevestigingen zoals selectievakjes vastleggen, maar dit alles kan worden vertaald als gebruikersgegevens, waarmee we andere verwerkingen kunnen doen.
In AngularJS Het werken met deze gegevensinvoer is heel eenvoudig, omdat we door de manier waarop de bibliotheek is ontworpen, een deel van deze gegevens die we ontvangen kunnen omzetten in acties in onze applicatie, hetzij om berekeningen te maken of om het gedrag ervan te definiëren.
In deze sectie zullen we iets meer zien over het omgaan met invoer in formulieren met behulp van AngularJS.
Hoe werkt het?De manier waarop we de unie kunnen maken tussen de invoerelementen en onze logica in AngularJS is heel eenvoudig, we moeten de eigenschap gebruiken ng-model en alles zal een soort relatie hebben, dus de waarde van wat we invoeren door vorm kan worden gemanipuleerd in AngularJS, dit kan van toepassing zijn op: invoertekst, keuzerondjes, selectievakje, enz..
Laten we hieronder een klein voorbeeld bekijken van wat we uitleggen:

Wat hier gebeurt, is dat in het kader van: Onze controleur we kunnen manipuleren wat de gebruiker doet in de markeringsvakje, dan als de gebruiker het markeert, zullen we onmiddellijk ontvangen markeerstift als waar en als u het vinkje uitschakelt, hebben we het tegenovergestelde antwoord.
We kunnen een beetje verder gaan en we kunnen beginnen Onze controleur Dat markeerstift standaard is gemarkeerd, wordt het selectievakje gemarkeerd wanneer de gebruiker de pagina voor de eerste keer ziet.
Acties toevoegen
Maar niet alleen bij het vastleggen van de gegevens moeten we blijven, we kunnen en moeten acties opnemen zodra we de invoer hebben ontvangen, in AngularJS We kunnen functies en methoden aanroepen die worden uitgevoerd in een geval van ons invoerelement, we gaan bijvoorbeeld een kleine rekenmachine maken die de investeringsraming neemt om een ​​onderneming te maken, wat we zullen doen is de ontvangen waarde vermenigvuldigen met 10, laten we zien:
1- Eerst moeten we de HTML-elementen vaststellen die we gaan gebruiken, zoals in het vorige voorbeeld gaan we een controller maken en de input gaat deel uitmaken van ons model:

VERGROTEN

2- We zien dat we een nieuwe eigenschap hebben geïntroduceerd ng-change en we hebben de aanroep toegewezen aan een functie genaamd calculoInversie () Dit betekent dat elke keer dat ons invoerveld verandert, de functie wordt aangeroepen, zoals we kunnen zien is het iets heel eenvoudigs.
3- Nu gaan we de code bouwen met AngularJS dat leven zal geven aan wat we hebben gezien:

4- We bouwen de juiste controller, dan geven we een initiële waarde voor het model aan, in dit geval stellen we het gelijk aan 0, dit omvat beide elementen zowel Geschat initiaal Wat noodzakelijk, dan maken we de functie calculoInversie () We zien dat we het doen in de zogenaamde scope van onze controller, op deze manier wordt het geassocieerd met ons element. Hiermee zou onze applicatie op een basisniveau moeten werken.
Natuurlijk mist dit voorbeeld verschillende validaties en houdt het alleen rekening met wanneer de gebruiker de waarde van de invoertekst wijzigt, maar het dient als een introductie om acties op te nemen in onze applicaties die zijn geschreven met AngularJS.
Vorigpagina 1 van 2Volgende