AngularJS- textarearichtlijn
Voorbeeld
'n Teksarea met data-binding:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Definisie en gebruik
AngularJS wysig die standaardgedrag van <textarea>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 <textarea>element met 'n requiredkenmerk, se $validtoestand is gestel op
falsesolank dit leeg is.
Hulle verskaf ook staatsbeheer. AngularJS hou die huidige toestand van alle teksarea-elemente.
Teksarea-velde 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 een true
van false.
Sintaksis
<textarea ng-model="name"></textarea>
Daar word na tekstarea-elemente verwys deur die waarde van die ng-modelkenmerk te gebruik.
CSS Klasse
<textarea>elemente binne 'n AngularJS toepassing kry sekere klasse . Hierdie klasse kan gebruik word om teksarea-elemente 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 bekragtiging. 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 teksarea-elemente, deur gebruik te maak van standaard CSS:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>