Τι είναι το μοντέλο ng στο AngularJs;
Το ng-model είναι μια οδηγία στο Angular.JS που αντιπροσωπεύει μοντέλα και πρωταρχικός σκοπός του είναι να συνδέσει την "προβολή" με το "μοντέλο".
Για παράδειγμα, ας υποθέσουμε ότι θέλετε να παρουσιάσετε μια απλή σελίδα στον τελικό χρήστη, όπως αυτή που εμφανίζεται παρακάτω, η οποία ζητά από τον χρήστη να εισαγάγει το "Όνομα" και "Επώνυμο" στα πλαίσια κειμένου. Και τότε θέλετε να διασφαλίσετε ότι αποθηκεύετε τις πληροφορίες που έχει εισαγάγει ο χρήστης στο μοντέλο δεδομένων σας.
Μπορείτε να χρησιμοποιήσετε την οδηγία ng-model για να αντιστοιχίσετε τα πεδία πλαισίου κειμένου "Όνομα" και "Επώνυμο" στο μοντέλο δεδομένων σας.
Η οδηγία ng-model θα διασφαλίσει ότι τα δεδομένα στην "προβολή" και τα δεδομένα του "μοντέλου" σας διατηρούνται συγχρονισμένα όλη την ώρα.
Σε αυτό το σεμινάριο, θα μάθετε-
- Το χαρακτηριστικό ng-model
- Πώς να χρησιμοποιήσετε το μοντέλο ng
- Περιοχή κειμένου
- Στοιχεία εισαγωγής
- Επιλέξτε στοιχείο από το αναπτυσσόμενο μενού
Το χαρακτηριστικό ng-model
Όπως συζητήθηκε στην εισαγωγή σε αυτό το κεφάλαιο, το χαρακτηριστικό ng-model χρησιμοποιείται για να συνδέσει τα δεδομένα του μοντέλου σας με την προβολή που παρουσιάζεται στον χρήστη.
Το χαρακτηριστικό ng-model χρησιμοποιείται για,
- Δεσμευτικά στοιχεία ελέγχου όπως είσοδος, περιοχή κειμένου και επιλέγουν στην προβολή του μοντέλου.
- Δώστε μια συμπεριφορά επικύρωσης - για παράδειγμα, μια επικύρωση μπορεί να προστεθεί σε ένα πλαίσιο κειμένου που μόνο αριθμητικοί χαρακτήρες μπορούν να εισαχθούν στο πλαίσιο κειμένου.
- Το χαρακτηριστικό ng-model διατηρεί την κατάσταση του ελέγχου (Κατά κατάσταση, εννοούμε ότι το στοιχείο ελέγχου και τα δεδομένα είναι υποχρεωμένα να διατηρούνται πάντα σε συγχρονισμό. Εάν αλλάξει η τιμή των δεδομένων μας, θα αλλάξει αυτόματα την τιμή στο στοιχείο ελέγχου και το αντίστροφο)
Πώς να χρησιμοποιήσετε το μοντέλο ng
1) Περιοχή κειμένου
Η ετικέτα περιοχής κειμένου χρησιμοποιείται για τον ορισμό ενός ελέγχου εισαγωγής κειμένου πολλαπλών γραμμών. Η περιοχή κειμένου μπορεί να περιέχει απεριόριστο αριθμό χαρακτήρων και το κείμενο αποδίδεται σε γραμματοσειρά σταθερού πλάτους.
Τώρα ας δούμε ένα απλό παράδειγμα για το πώς μπορούμε να προσθέσουμε την οδηγία ng-model σε ένα στοιχείο ελέγχου περιοχής κειμένου.
Σε αυτό το παράδειγμα, θέλουμε να δείξουμε πώς μπορούμε να περάσουμε μια συμβολοσειρά πολλαπλών γραμμών από τον ελεγκτή στην προβολή και να επισυνάψουμε αυτήν την τιμή στο στοιχείο ελέγχου περιοχής κειμένου.
Event Registration Guru99 Global Event
Επεξήγηση κώδικα:
- Η οδηγία ng-model χρησιμοποιείται για τη σύνδεση της μεταβλητής μέλους που ονομάζεται "pDescription" στο στοιχείο ελέγχου "textarea".
Η μεταβλητή "pDescription" θα περιέχει πραγματικά το κείμενο, το οποίο θα μεταφερθεί στο στοιχείο ελέγχου περιοχής κειμένου. Έχουμε επίσης αναφέρει 2 χαρακτηριστικά για τον έλεγχο textarea που είναι σειρές = 4 και cols = 50. Αυτά τα χαρακτηριστικά έχουν αναφερθεί έτσι ώστε να μπορούμε να δείξουμε πολλές γραμμές κειμένου. Καθορίζοντας αυτά τα χαρακτηριστικά, το textarea θα έχει τώρα 4 σειρές και 50 στήλες, ώστε να μπορεί να εμφανίζει πολλές γραμμές κειμένου.
- Εδώ συνδέουμε τη μεταβλητή μέλους στο αντικείμενο πεδίου που ονομάζεται "pDescription" και βάζουμε μια τιμή συμβολοσειράς στη μεταβλητή.
- Σημειώστε ότι βάζουμε το / n κυριολεκτικά στη συμβολοσειρά έτσι ώστε το κείμενο να μπορεί να έχει πολλές γραμμές όταν εμφανίζεται στην περιοχή κειμένου. Το / n κυριολεκτικά χωρίζει το κείμενο σε πολλές γραμμές έτσι ώστε να μπορεί να αποδώσει στον έλεγχο κειμένου ως πολλαπλές γραμμές κειμένου.
Εάν ο κωδικός εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος κατά την εκτέλεση του κώδικα στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο
- Είναι σαφές ότι η τιμή που αποδίδεται στη μεταβλητή pDescription ως μέρος του αντικειμένου πεδίου μεταβιβάστηκε στο στοιχείο ελέγχου κειμένου.
- Στη συνέχεια, εμφανίζεται όταν φορτώνεται η σελίδα.
2) Στοιχεία εισαγωγής
Η οδηγία ng-model μπορεί επίσης να εφαρμοστεί στα στοιχεία εισαγωγής όπως το πλαίσιο κειμένου, τα πλαίσια ελέγχου, τα κουμπιά επιλογής κ.λπ.
Ας δούμε ένα παράδειγμα για το πώς μπορούμε να χρησιμοποιήσουμε το μοντέλο ng με τον τύπο εισαγωγής "πλαίσιο κειμένου" και "πλαίσιο ελέγχου".
Εδώ θα έχουμε έναν τύπο εισαγωγής κειμένου που θα έχει το όνομα "Guru99" και θα υπάρχουν 2 πλαίσια ελέγχου, ένα από τα οποία θα επισημανθεί από προεπιλογή και το άλλο δεν θα επισημανθεί.
Event Registration Guru99 Global Event
Επεξήγηση κώδικα:
- Η οδηγία ng-model χρησιμοποιείται για τη σύνδεση της μεταβλητής μέλους που ονομάζεται "pname" στο στοιχείο ελέγχου κειμένου τύπου εισόδου. Η μεταβλητή "pname" θα περιέχει το κείμενο του "Guru99" το οποίο θα μεταφερθεί στο στοιχείο ελέγχου εισαγωγής κειμένου. Σημειώστε ότι οποιοδήποτε όνομα μπορεί να δοθεί στο όνομα της μεταβλητής μέλους.
- Εδώ ορίζουμε το πρώτο μας πλαίσιο ελέγχου "Ελεγκτές" που είναι προσαρτημένο στη μεταβλητή μέλους Topics.Controllers. Το πλαίσιο ελέγχου θα επισημανθεί για αυτόν τον έλεγχο ελέγχου.
- Εδώ ορίζουμε το πρώτο μας πλαίσιο ελέγχου "Μοντέλα" που είναι προσαρτημένο στη μεταβλητή μέλους Topics.Models. Το πλαίσιο ελέγχου δεν θα επισημανθεί για αυτό το στοιχείο ελέγχου ελέγχου.
- Εδώ επισυνάπτουμε τη μεταβλητή μέλους που ονομάζεται "pName" και βάζουμε μια τιμή συμβολοσειράς "Guru99".
- Δηλώνουμε μια μεταβλητή πίνακα μελών που ονομάζεται "Topics" και της δίνουμε δύο τιμές, η πρώτη είναι "true" και η δεύτερη είναι "false".
Έτσι, όταν το πρώτο πλαίσιο ελέγχου λαμβάνει την τιμή true, το πλαίσιο ελέγχου θα επισημανθεί για αυτό το στοιχείο ελέγχου, και επίσης, δεδομένου ότι η δεύτερη τιμή είναι ψευδής, το πλαίσιο ελέγχου δεν θα επισημανθεί για αυτό το στοιχείο ελέγχου.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο,
- Είναι σαφές ότι η τιμή που αποδίδεται στη μεταβλητή pName είναι "Guru99"
- Δεδομένου ότι η πρώτη τιμή ελέγχου είναι "true" πέρασε, το πλαίσιο ελέγχου επισημαίνεται για το πλαίσιο ελέγχου "Controllers". Ομοίως, επειδή η δεύτερη τιμή είναι ψευδής, το πλαίσιο ελέγχου δεν επισημαίνεται για το πλαίσιο ελέγχου "Μοντέλα".
3) Επιλέξτε στοιχείο από το αναπτυσσόμενο μενού
Η οδηγία ng-model μπορεί επίσης να εφαρμοστεί στο στοιχείο επιλογής και να χρησιμοποιηθεί για τη συμπλήρωση των στοιχείων λίστας στη λίστα επιλογής.
Ας δούμε ένα παράδειγμα για το πώς μπορούμε να χρησιμοποιήσουμε το μοντέλο ng με τον επιλεγμένο τύπο εισαγωγής.
Εδώ θα έχουμε έναν τύπο εισαγωγής κειμένου που θα έχει το όνομα "Guru99" και θα υπάρχει μια επιλεγμένη λίστα με 2 στοιχεία λίστας "Controller" και "Models".
Event Registration Guru99 Global Event
- Η οδηγία ng-model χρησιμοποιείται για την προσάρτηση της μεταβλητής μέλους που ονομάζεται "Topics" στο στοιχείο ελέγχου επιλεγμένου τύπου. Μέσα από το στοιχείο ελέγχου επιλογής, για καθεμία από τις επιλογές, επισυνάπτουμε τη μεταβλητή μέλους του Topics.option1 για την πρώτη επιλογή και Topics.option2 για τη δεύτερη επιλογή.
- Εδώ ορίζουμε τη μεταβλητή πίνακα θέματος που περιέχει 2 ζεύγη τιμών-κλειδιών. Το πρώτο ζεύγος έχει την τιμή "Ελεγκτές" και το δεύτερο έχει την τιμή "Μοντέλα". Αυτές οι τιμές θα μεταβιβαστούν για να επιλέξετε ετικέτα εισόδου στην προβολή.
Εάν ο κωδικός εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος.
Παραγωγή:
Από την έξοδο, μπορεί να φανεί ότι η τιμή που αποδίδεται στη μεταβλητή pName είναι "Guru99" και μπορούμε να δούμε ότι το επιλεγμένο στοιχείο ελέγχου εισόδου έχει τις επιλογές "Controllers" και "Models".
Περίληψη
- Τα μοντέλα στο Angular JS αντιπροσωπεύονται από την οδηγία ng-model. Ο πρωταρχικός σκοπός αυτής της οδηγίας είναι να συνδέσει την άποψη με το μοντέλο. Πώς να δημιουργήσετε έναν απλό ελεγκτή χρησιμοποιώντας τις οδηγίες ng-app, ng-controller και ng-model.
- Η οδηγία ng-model μπορεί να συνδεθεί με έναν έλεγχο εισόδου "περιοχή κειμένου" και οι πολλαπλές σειρές μπορούν να περάσουν από τον ελεγκτή στην προβολή.
- Η οδηγία ng-model μπορεί να συνδεθεί με στοιχεία ελέγχου εισόδου, όπως τα στοιχεία ελέγχου κειμένου και πλαισίου ελέγχου, ώστε να είναι πιο δυναμικά κατά το χρόνο εκτέλεσης.
- Η οδηγία ng-model μπορεί επίσης να χρησιμοποιηθεί για τη συμπλήρωση μιας επιλεγμένης λίστας με επιλογές που μπορούν να εμφανίζονται στον χρήστη.