AngularJS textarea-instruktiot

määrittely ja käyttö

AngularJS muuttaa <textarea> elementin oletusarvoinen käyttäytyminen, mutta edellyttäen, että ng-model ominaisuus on olemassa.

Ne tarjoavat data-bindingin, mikä tarkoittaa, että ne ovat AngularJS-mallin osa ja niitä voidaan viitata ja päivittää AngularJS-funktioiden ja DOM:n kautta.

Ne tarjoavat vahvistusta. Esimerkki: required ominaisuuden <textarea> elementti, kun se on tyhjä, sen $valid Tila asetetaan false.

Ne tarjoavat myös tilan hallintaa. AngularJS tallentaa kaikki tekstialueelementtien nykyiset tilat.

Tekstialuekentällä on seuraavat tilat:

• $untouched Tämä kenttä ei ole koskettu
• $touched Tämä kenttä on koskettu
• $pristine Tämä kenttä ei ole vielä muutettu
• $dirty Tämä kenttä on muutettu
• $invalid kenttä sisältö ei ole kelvollinen
• $valid kenttä sisältö on kelvollinen

Jokaisen tilan arvo edustaa boolean-arvoa, totta tai epätotta.

Esimerkki

Datan sidottu tekstialue:

<textarea ng-model="myTextarea"></textarea>
<p> Tekstialuekentän arvo on:</p>
<h1>{{myTextarea}}</h1>

Kokeile itse

syntaksi

<textarea ng-model="name"></textarea>

Käyttämällä ng-model ominaisuuksien arvoja viittaamaan tekstialueelementtiin.

CSS-luokat

AngularJS-sovelluksessa <textarea> Elementti saa tiettyjä luokkia. Näitä luokkia voidaan käyttää tekstialueelementin tilan mukaan asettamaan sen tyyliä.

Lisättiin seuraavat luokat:

• ng-untouched Tämä kenttä ei ole koskettu
• ng-touched Tämä kenttä on koskettu
• ng-pristine Tämä kenttä ei ole vielä muutettu
• ng-dirty Tämä kenttä on muutettu
• ng-valid kenttä sisältö on kelvollinen
• ng-invalid kenttä sisältö ei ole kelvollinen
• ng-valid-key tarkistetaan yksi avain kerrallaan. Esimerkiksi:ng-valid-requiredkun on useita asioita, jotka on tarkistettava
• ng-invalid-key Esimerkiksi:ng-invalid-required

Jos luokka edustaa arvoa falsejos nämä luokat poistetaan.

Esimerkki

Käytä standardeja CSS-tyylejä tehokkaiden ja virheellisten tekstialueiden elementtien tyyleihin soveltamiseksi:

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

Kokeile itse