AngularJS input-instruktiot

Määrittely ja käyttö

AngularJS muuttaa <input> elementin oletusarvoisia toimintoja, mutta edellyttäen, että ng-model-ominaisuus on määritelty.

Ne tarjoavat datavyöryä, 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 ominaisuuksien <input> elementti, kun se on tyhjä, sen $valid tilan asetetaan false.

Ne tarjoavat myös tilan hallintaa. AngularJS tallentaa kaikki syöttöelementtien nykyiset tilat.

Syöttökentällä on seuraavat tilat:

• $untouched Tämä kenttä ei ole kosketettu
• $touched Tämä kenttä on kosketettu
• $pristine Tämä kenttä ei ole muutettu
• $dirty Tämä kenttä on muutettu
• $invalid Kentän sisältö on epävirheellinen
• $valid Kentän sisältö on oikea

Jokaisen tilan arvo edustaa boolean-arvoa, joka on true tai false.

Esimerkki

Syöttökenttä, jossa on datavyöry:

<input ng-model="myInput">
<p>Syöttökentän arvo on:</p>
<h1>{{myInput}}</h1>

Kokeile itse

Syntax

<input ng-model="name">

Käyttämällä ng-model ominaisuuksien arvoja viittaamaan syöttöelementtiin.

CSS-luokat

AngularJS-sovelluksessa <input> Elementti on saanut tiettyjä luokkia. Näitä luokkia voidaan käyttää elementin tilan mukaan asettamaan sen tyyliä.

Lisättiin seuraavat luokat:

• ng-untouched Tämä kenttä ei ole kosketettu
• ng-touched Tämä kenttä on kosketettu
• ng-pristine Tämä kenttä ei ole muutettu
• ng-dirty Tämä kenttä on muutettu
• ng-valid Kentän sisältö on oikea
• ng-invalid Kentän sisältö on epävirheellinen
• ng-valid-key Tarkista jokainen avain kerrallaan. Esimerkiksi:ng-valid-requiredKun useita asioita on tarkistettava, tämä on erittäin hyödyllistä.
• 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 syöttöelementtien soveltamiseen:

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

Kokeile itse