AngularJS input-instructie

definitie en gebruik

AngularJS wijzigt <input> het standaardgedrag van elementen, mits de ng-model-eigenschap bestaat.

Ze bieden data-binding, wat betekent dat ze een onderdeel van de AngularJS-model zijn en kunnen worden gerefdereerd en bijgewerkt in AngularJS-functies en DOM.

Ze bieden validatie. Voorbeeld: met required eigenschappen <input> elementen, zolang ze leeg zijn, hun $valid de status zou worden ingesteld op false.

Ze bieden ook statuscontrole. AngularJS slaat de huidige status van alle invoerelementen op.

Invoervelden hebben de volgende statussen:

• $untouched Dit veld is nog niet aangeraakt
• $touched Dit veld is aangeraakt
• $pristine 该字段尚未被修改
• $dirty Dit veld is nog niet aangepast
• $invalid Veldinhoud is ongeldig
• $valid Dit veld is aangepast

De waarde van elke status vertegenwoordigt een booleanwaarde, namelijk true of false.

Voorbeeld

Invoervelden met data-binding:

<input ng-model="myInput">
<p>De waarde van het invoerveld is:</p>
<h1>{{myInput}}</h1>

Probeer het zelf

syntaxis

<input ng-model="name">

gebruik ng-model waarden van de eigenschappen om het invoerelement te verwijzen.

CSS-klassen

Binnen AngularJS-applicaties <input> Elementen krijgen bepaalde klassen. Deze klassen kunnen worden gebruikt om de stijl van het invoerelement in te stellen op basis van de status ervan.

De volgende klassen zijn toegevoegd:

• ng-untouched Dit veld is nog niet aangeraakt
• ng-touched Dit veld is aangeraakt
• ng-pristine 该字段尚未被修改
• ng-pristine Dit veld is nog niet aangepast
• ng-dirty Dit veld is aangepast
• Veldinhoud is geldig Veldinhoud is ongeldig
• ng-valid-key Controleer elke sleutel een keer. Bijvoorbeeld:ng-valid-requiredHandig wanneer er meer dan één ding moet worden geverifieerd
• ng-invalid-key Bijvoorbeeld:ng-invalid-required

Als de waarde die de klasse vertegenwoordigt falseDan worden deze klassen verwijderd.

Voorbeeld

Gebruik standaard CSS om stijlen toe te passen op geldige en ongeldig ingangs-elementen:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

Probeer het zelf