Οδηγός του οδηγού AngularJS textarea

Ορισμός και χρήση

το AngularJS τροποποιεί <textarea> πρότυπος συμπεριφορά του στοιχείου, αλλά υπό την προϋπόθεση ότι ng-model υπάρχουν.

Προσφέρουν δεσμευμένη δεδομένα, αυτό σημαίνει ότι είναι μέρος του μοντέλου AngularJS και μπορούν να αναφέρονται και να ενημερώνονται στις λειτουργίες AngularJS και στο DOM.

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

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

Το πεδίο του κειμένου έχει τις παρακάτω καταστάσεις:

• $untouched Το πεδίο αυτό δεν έχει αγγιστεί
• $touched Το πεδίο αυτό έχει αγγιστεί
• $pristine Το πεδίο δεν έχει τροποποιηθεί
• $dirty Το πεδίο έχει τροποποιηθεί
• $invalid Η περιεχόμενη του πεδίου είναι μη έγκυρη
• $valid Η περιεχόμενη του πεδίου είναι έγκυρη

Η τιμή κάθε κατάστασης αντιπροσωπεύει έναν αριθμητικό τιμή, αληθής ή ψευδής.

Παράδειγμα

Με δεδομένη δεσμευμένη περιοχή κειμένου:

<textarea ng-model="myTextarea"></textarea>
<p>Η τιμή του πεδίου του κειμένου είναι:</p>
<h1>{{myTextarea}}</h1>

Δοκιμάστε το προσωπικά

Γραμματική

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

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

Κλάσεις CSS

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

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

• 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>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>

Δοκιμάστε το προσωπικά