AngularJS input-instruktion

Definition och användning

AngularJS ändrar <input> elementets standardbeteende, men förutsatt att ng-model-egenskapen finns.

De tillhandahåller data-binding, vilket innebär att de är en del av AngularJS-modellen och kan hänvisas till och uppdateras i AngularJS-funktioner och DOM.

De tillhandahåller validering. Exempel: med required egenskapens <input> element, så länge det är tomt, dess $valid tilståndet kommer att sättas till false.

De tillhandahåller också tillståndskontroll. AngularJS sparar alla input-elementens aktuella tillstånd.

Input-fältet har följande tillstånd:

• $untouched Detta fält har inte blivit berört
• $touched Detta fält har blivit berört
• $pristine Detta fält har inte ändrats
• $dirty Detta fält har ändrats
• $invalid fältinnehållet är ogiltigt
• $valid fältinnehållet är giltigt

Varje tillståndets värde representerar ett booleskt värde, för true eller false.

Exempel

Input-fält med data-binding:

<input ng-model="myInput">
<p>Värdet för input-fältet är:</p>
<h1>{{myInput}}</h1>

Prova själv

Syntax

<input ng-model="name">

Använd ng-model värden för att hänvisa till input-elementet.

CSS-klasser

Inom AngularJS-applikationen <input> Elementet tilldelas vissa klasser. Dessa klasser kan användas för att ställa in stilen baserat på tillståndet för input-elementet.

Följande klasser har lagts till:

• ng-untouched Detta fält har inte blivit berört
• ng-touched Detta fält har blivit berört
• ng-pristine Detta fält har inte ändrats
• ng-dirty Detta fält har ändrats
• ng-valid fältinnehållet är giltigt
• ng-invalid fältinnehållet är ogiltigt
• ng-valid-key verifierar varje nyckel varje gång. Exempel:ng-valid-requiredär mycket användbart när flera saker måste verifieras
• ng-invalid-key Exempel:ng-invalid-required

Om värdet som klassen representerar är falsedessa klasser kommer att tas bort.

Exempel

Använd standard CSS för att tillämpa stil på giltiga och ogiltiga inmatningselement:

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

Prova själv