AngularJS- inputrichtlijn
Voorbeeld
Een invoerveld met data-binding:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Definitie en gebruik
AngularJS past het standaardgedrag van <input>elementen aan, maar alleen als het ng-modelattribuut aanwezig is.
Ze bieden gegevensbinding, wat betekent dat ze deel uitmaken van het AngularJS-model, en waarnaar kan worden verwezen en waarnaar kan worden verwezen, zowel in AngularJS-functies als in de DOM.
Ze zorgen voor validatie. Voorbeeld: een <input>element met een requiredattribuut, heeft de $validstatus ingesteld op
falsezolang het leeg is.
Ze zorgen ook voor staatscontrole. AngularJS bevat de huidige status van alle invoerelementen.
Invoervelden hebben de volgende statussen:
$untouchedHet veld is nog niet aangeraakt$touchedHet veld is aangeraakt$pristineHet veld is nog niet gewijzigd$dirtyHet veld is gewijzigd$invalidDe veldinhoud is niet geldig$validDe veldinhoud is geldig
De waarde van elke status vertegenwoordigt een Booleaanse waarde en is of true
of false.
Syntaxis
<input ng-model="name">
Er wordt naar invoerelementen verwezen door de waarde van het ng-modelattribuut te gebruiken.
CSS-klassen
<input>elementen binnen een AngularJS-toepassing krijgen bepaalde klassen . Deze klassen kunnen worden gebruikt om invoerelementen te stylen op basis van hun status.
De volgende klassen worden toegevoegd:
ng-untouchedHet veld is nog niet aangeraaktng-touchedHet veld is aangeraaktng-pristineHet veld is nog niet gewijzigdng-dirtyHet veld is gewijzigdng-validDe veldinhoud is geldigng-invalidDe veldinhoud is niet geldigng-valid-keyEén sleutel voor elke validatie. Voorbeeld:ng-valid-required, handig wanneer er meer dan één ding moet worden gevalideerdng-invalid-keyVoorbeeld:ng-invalid-required
De klassen worden verwijderd als de waarde die ze vertegenwoordigen false.
Voorbeeld
Pas stijlen toe voor geldige en ongeldige invoerelementen met behulp van standaard CSS:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>