Wat is ng-model in AngularJs?
ng-model is een richtlijn in Angular.JS die modellen vertegenwoordigt en het primaire doel is om de "view" aan het "model" te binden.
Stel dat u een eenvoudige pagina aan de eindgebruiker wilt presenteren zoals hieronder weergegeven, die de gebruiker vraagt om de "Voornaam" en "Achternaam" in tekstvakken in te voeren. En dan wilde je er zeker van zijn dat je de informatie die de gebruiker heeft ingevoerd in je datamodel opslaat.
U kunt de richtlijn ng-model gebruiken om de tekstvakvelden "Voornaam" en "Achternaam" aan uw gegevensmodel toe te wijzen.
De ng-model-richtlijn zorgt ervoor dat de gegevens in de "view" en die van uw "model" de hele tijd gesynchroniseerd blijven.
In deze tutorial leer je-
- Het kenmerk ng-model
- Hoe ng-model te gebruiken
- Tekstgebied
- Invoerelementen
- Selecteer elementformulier Dropdown
Het kenmerk ng-model
Zoals besproken in de inleiding van dit hoofdstuk, wordt het kenmerk ng-model gebruikt om de gegevens in uw model te binden aan de weergave die aan de gebruiker wordt gepresenteerd.
Het kenmerk ng-model wordt gebruikt voor,
- Bindende besturingselementen zoals invoer, tekstgebied en selecties in de weergave in het model.
- Zorg voor een validatiegedrag - er kan bijvoorbeeld een validatie worden toegevoegd aan een tekstvak dat alleen numerieke tekens in het tekstvak kunnen worden ingevoerd.
- Het kenmerk ng-model handhaaft de status van de controle (met status bedoelen we dat de controle en de gegevens altijd gesynchroniseerd moeten worden gehouden. Als de waarde van onze gegevens verandert, verandert dit automatisch de waarde in de controle en vice versa)
Hoe ng-model te gebruiken
1) Tekstgebied
De tekstgebied-tag wordt gebruikt om een tekstinvoerbesturingselement met meerdere regels te definiëren. Het tekstgebied kan een onbeperkt aantal tekens bevatten en de tekst wordt weergegeven in een lettertype met vaste breedte.
Laten we nu eens kijken naar een eenvoudig voorbeeld van hoe we de richtlijn ng-model kunnen toevoegen aan een besturingselement voor tekstgebieden.
In dit voorbeeld willen we laten zien hoe we een string met meerdere regels van de controller naar de weergave kunnen doorgeven en die waarde kunnen koppelen aan het tekstgebiedbesturingselement.
Event Registration Guru99 Global Event
Code Verklaring:
- De ng-model-instructie wordt gebruikt om de lidvariabele genaamd "pDescription" aan het "textarea" -controle te koppelen.
De "pDescription" -variabele zal feitelijk de tekst bevatten, die zal worden doorgegeven aan het tekstgebiedbesturingselement. We hebben ook 2 attributen genoemd voor het textarea-besturingselement, dat is rijen = 4 en cols = 50. Deze attributen zijn genoemd zodat we meerdere regels tekst kunnen tonen. Door deze attributen te definiëren heeft het tekstgebied nu 4 rijen en 50 kolommen zodat het meerdere regels tekst kan tonen.
- Hier koppelen we de lidvariabele aan het scope-object genaamd "pDescription" en plaatsen we een stringwaarde aan de variabele.
- Merk op dat we de / n letterlijk in de tekenreeks plaatsen, zodat de tekst uit meerdere regels kan bestaan wanneer deze in het tekstgebied wordt weergegeven. De letterlijke / n splitst de tekst op in meerdere regels, zodat deze in het tekstgebied kan worden weergegeven als meerdere regels tekst.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u de code in de browser uitvoert.
Uitgang:
Van de output
- Het is duidelijk te zien dat de waarde die aan de pDescription-variabele is toegewezen als onderdeel van het scope-object, werd doorgegeven aan het textarea-besturingselement.
- Vervolgens is het weergegeven wanneer de pagina wordt geladen.
2) Invoerelementen
De ng-model-richtlijn kan ook worden toegepast op de invoerelementen zoals het tekstvak, selectievakjes, keuzerondjes, enz.
Laten we eens kijken naar een voorbeeld van hoe we het ng-model kunnen gebruiken met het invoertype "textbox" en "checkbox".
Hier hebben we een type tekstinvoer dat de naam "Guru99" zal hebben en er zullen 2 selectievakjes zijn, een die standaard is gemarkeerd en de andere niet.
Event Registration Guru99 Global Event
Code Verklaring:
- De ng-model-instructie wordt gebruikt om de lidvariabele genaamd "pname" te koppelen aan het invoertype tekstcontrole. De variabele "pname" bevat de tekst van "Guru99" die wordt doorgegeven aan de tekstinvoerbesturing. Merk op dat elke naam kan worden gegeven aan de naam van de lidvariabele.
- Hier definiëren we onze eerste checkbox "Controllers" die is gekoppeld aan de lidvariabele Topics.Controllers. Het selectievakje wordt gemarkeerd voor deze controlecontrole.
- Hier definiëren we ons eerste selectievakje "Modellen" dat aan de lidvariabele Topics.Models is gekoppeld. Het selectievakje wordt niet gemarkeerd voor deze controle.
- Hier koppelen we de lidvariabele genaamd "pName" en plaatsen we een stringwaarde van "Guru99".
- We declareren een arrayvariabele met de naam "Topics" en geven deze twee waarden, de eerste is "true" en de tweede is "false".
Dus als het eerste selectievakje de waarde true krijgt, wordt het selectievakje voor dit besturingselement gemarkeerd en evenzo, aangezien de tweede waarde false is, wordt het selectievakje voor dit besturingselement niet gemarkeerd.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output,
- Het is duidelijk te zien dat de waarde die is toegewezen aan de variabele pName "Guru99" is
- Aangezien de eerste controlewaarde "true" is, is deze geslaagd, het selectievakje is gemarkeerd voor het selectievakje "Controllers". Evenzo, aangezien de tweede waarde false is, is het selectievakje niet gemarkeerd voor het selectievakje "Modellen".
3) Selecteer het vervolgkeuzemenu van het elementformulier
De ng-model-richtlijn kan ook worden toegepast op het select-element en worden gebruikt om de lijstitems in de selectielijst te vullen.
Laten we eens kijken naar een voorbeeld van hoe we het ng-model kunnen gebruiken met het geselecteerde invoertype.
Hier hebben we een tekstinvoertype met de naam "Guru99" en er zal een keuzelijst zijn met 2 lijstitems van "Controller" en "Modellen".
Event Registration Guru99 Global Event
- De ng-model-instructie wordt gebruikt om de lidvariabele genaamd "Topics" te koppelen aan het select type control. Binnen het besturingselement selecteren, voor elk van de opties, koppelen we de lidvariabele van Topics.option1 voor de eerste optie en Topics.option2 voor de tweede optie.
- Hier definiëren we onze Topics-arrayvariabele die 2 sleutel-waardeparen bevat. Het eerste paar heeft de waarde "Controllers" en het tweede heeft de waarde "Modellen". Deze waarden worden doorgegeven om de invoertag in de weergave te selecteren.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven.
Uitgang:
Uit de uitvoer kan worden gezien dat de waarde die is toegewezen aan de pName-variabele "Guru99" is en we kunnen zien dat de geselecteerde invoerbesturing de opties "Controllers" en "Modellen" heeft.
Overzicht
- Modellen in Angular JS worden weergegeven door de ng-model-richtlijn. Het primaire doel van deze richtlijn is om de visie aan het model te binden. Hoe een eenvoudige controller te bouwen met behulp van de ng-app, ng-controller en ng-model richtlijnen.
- De ng-model-richtlijn kan worden gekoppeld aan een "tekstgebied" -invoerbesturing en multiline strings kunnen van de controller naar de weergave worden doorgegeven.
- De ng-model-richtlijn kan worden gekoppeld aan invoerbesturingselementen zoals de besturingselementen voor tekst en selectievakjes om ze tijdens runtime dynamischer te maken.
- De ng-model-richtlijn kan ook worden gebruikt om een selectielijst te vullen met opties die aan de gebruiker kunnen worden weergegeven.