Προτεινόμενες κουρσές:

Οδηγίες input του AngularJS

Ορισμός και χρήση <input> Το AngularJS τροποποιεί

Την προεπιλεγμένη συμπεριφορά του στοιχείου, αλλά προϋποθέτει την ύπαρξη της ιδιότητας ng-model.

Προσφέρουν δεσμεύσεις δεδομένων, αυτό σημαίνει ότι είναι μέρος του μοντέλου AngularJS και μπορούν να αναφέρονται και να ενημερώνονται στις συνάρτησεις AngularJS και στο DOM. Προσφέρουν επαλήθευση. Παράδειγμα: με required <input> στοιχείο, αρκεί να είναι κενό, η ιδιότητα $valid Η κατάσταση θα οριστεί ως false.

Επιπλέον, παρέχουν έλεγχο κατάστασης. Το AngularJS αποθηκεύει την τρέχουσα κατάσταση όλων των στοιχείων εισαγωγής.

Το πεδίο εισαγωγής έχει τις ακόλουθες καταστάσεις:

• $untouched Το πεδίο αυτό δεν έχει γίνει άγγιγμα
• $touched Το πεδίο αυτό έχει ήδη γίνει άγγιγμα
• $pristine Το πεδίο δεν έχει αλλάξει
• $dirty Το πεδίο έχει αλλάξει
• $invalid Το περιεχόμενο του πεδίου είναι μη έγκυρο
• $valid Το περιεχόμενο του πεδίου είναι έγκυρο

Η τιμή κάθε κατάστασης αντιπροσωπεύει μια αριθμητική τιμή, που είναι true ή false.

Παράδειγμα

Πεδία εισαγωγής με δεδομένα δεσμεύσεων:

<input ng-model="myInput">
<p>Η τιμή του πεδίου εισαγωγής είναι:</p>
<h1>{{myInput}}</h1>

Προσπαθήστε το προσωπικά

Γραμματική

<input ng-model="name">

Χρησιμοποιώντας ng-model Τιμές ιδιοτήτων για να αναφέρονται στο στοιχείο εισαγωγής.

Κλάσεις CSS

Σε μια εφαρμογή AngularJS <input> Το στοιχείο έχει αποδοθεί με ορισμένες κλάσεις. Αυτές οι κλάσεις μπορούν να χρησιμοποιηθούν για να καθορίσουν το στυλ του στοιχείου ανάλογα με την κατάσταση του στοιχείου εισαγωγής.

Προστέθηκαν οι παρακάτω κλάσεις:

• ng-untouched Το πεδίο αυτό δεν έχει γίνει άγγιγμα
• ng-touched Το πεδίο αυτό έχει ήδη γίνει άγγιγμα
• ng-pristine Το πεδίο δεν έχει αλλάξει
• ng-dirty Το πεδίο έχει αλλάξει
• ng-valid Το περιεχόμενο του πεδίου είναι έγκυρο
• ng-invalid Το περιεχόμενο του πεδίου είναι μη έγκυρο
• ng-valid-key Επιβεβαίωση κάθε κλειδιού κάθε φορά.ng-valid-requiredυπάρχουν περισσότερα πράγματα που πρέπει να επιβεβαιωθούν
• ng-invalid-key Παράδειγμα:ng-invalid-required

Αν η τιμή που αντιπροσωπεύει η κλάση είναι falseΕάν οι κλάσεις αυτές θα διαγραφούν.

Παράδειγμα

Χρησιμοποιήστε το πρότυπο CSS για την εφαρμογή στυλ σε στοιχεία εισόδου που είναι έγκυρα και μη έγκυρα:

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

Προσπαθήστε το προσωπικά