AngularJS- inputrichtlijn
Voorbeeld
'n Invoerveld met data-binding:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Definisie en gebruik
AngularJS wysig die standaardgedrag van <input>elemente, maar slegs as die ng-modelkenmerk teenwoordig is.
Hulle verskaf data-binding, wat beteken dat hulle deel is van die AngularJS-model, en kan verwys word na, en opgedateer word, beide in AngularJS funksies en in die DOM.
Hulle verskaf bekragtiging. Voorbeeld: 'n <input>element met 'n requiredkenmerk, se $validtoestand is gestel op
falsesolank dit leeg is.
Hulle verskaf ook staatsbeheer. AngularJS hou die huidige toestand van alle invoerelemente.
Invoervelde het die volgende toestande:
$untouchedDie veld is nog nie aangeraak nie$touchedDie veld is aangeraak$pristineDie veld is nog nie gewysig nie$dirtyDie veld is gewysig$invalidDie veldinhoud is nie geldig nie$validDie veldinhoud is geldig
Die waarde van elke staat verteenwoordig 'n Boole-waarde, en is óf true
óf false.
Sintaksis
<input ng-model="name">
Daar word na invoerelemente verwys deur die waarde van die ng-modelkenmerk te gebruik.
CSS Klasse
<input>elemente binne 'n AngularJS toepassing kry sekere klasse . Hierdie klasse kan gebruik word om insetelemente volgens hul toestand te styl.
Die volgende klasse word bygevoeg:
ng-untouchedDie veld is nog nie aangeraak nieng-touchedDie veld is aangeraakng-pristineDie veld is nog nie gewysig nieng-dirtyDie veld is gewysigng-validDie veldinhoud is geldigng-invalidDie veldinhoud is nie geldig nieng-valid-keyEen sleutel vir elke validering. Voorbeeld:ng-valid-required, nuttig wanneer daar meer as een ding is wat bekragtig moet wordng-invalid-keyVoorbeeld:ng-invalid-required
Die klasse word verwyder as die waarde wat hulle verteenwoordig is false.
Voorbeeld
Pas style toe vir geldige en ongeldige invoerelemente, deur gebruik te maak van standaard CSS:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>