Πώς να χρησιμοποιήσετε το "ng-model" στο AngularJS με EXAMPLES
Τζέιμς Χάρτμαν
⚡ Έξυπνη Σύνοψη
Το ng-model στο AngularJS συνδέει ένα στοιχείο ελέγχου εισόδου απευθείας με μια ιδιότητα στο $scope, keeping η προβολή και το μοντέλο συγχρονίστηκαν και προς τις δύο κατευθύνσεις. Οι παρακάτω ενότητες καλύπτουν το χαρακτηριστικό, τρία λειτουργικά παραδείγματα και τα σφάλματα που αντιμετωπίζουν περισσότερο οι αρχάριοι.
Τι είναι το ng-model στο AngularJS;
Το ng-model είναι μια οδηγία στο AngularJS που αντιπροσωπεύει το μοντέλο και ο κύριος σκοπός της είναι να συνδέσει την «προβολή» με το «μοντέλο». Ό,τι πληκτρολογεί ο χρήστης σε ένα στοιχείο ελέγχου γράφεται απευθείας σε μια ιδιότητα στο $scope, και ό,τι γράφει ο ελεγκτής σε αυτήν την ιδιότητα ωθείται κατευθείαν πίσω στον έλεγχο.
Για παράδειγμα, ας υποθέσουμε ότι θέλετε να παρουσιάσετε μια απλή σελίδα στον τελικό χρήστη όπως αυτή που φαίνεται παρακάτω, η οποία ζητά από τον χρήστη να εισαγάγει το "Όνομα" και το "Επώνυμο" σε πλαίσια κειμένου. Και στη συνέχεια θέλετε να βεβαιωθείτε ότι έχετε αποθηκεύσει τις πληροφορίες που έχει εισαγάγει ο χρήστης στο μοντέλο δεδομένων σας.
Μπορείτε να χρησιμοποιήσετε την οδηγία ng-model για να αντιστοιχίσετε τα πεδία πλαισίου κειμένου "Όνομα" και "Επώνυμο" στο μοντέλο δεδομένων σας. Η οδηγία θα διασφαλίσει ότι τα δεδομένα στην "προβολή" και αυτά του "μοντέλου" σας διατηρούνται συγχρονισμένα καθ' όλη τη διάρκεια, χωρίς ούτε μία γραμμή κώδικα χειρισμού συμβάντων.
⚠️ Σημείωση έκδοσης: Το AngularJS (ο κλάδος 1.x) έφτασε στο τέλος της ζωής του στις 31 Δεκεμβρίου 2021 και δεν λαμβάνει πλέον ενημερώσεις ασφαλείας. Τα παρακάτω παραδείγματα εξακολουθούν να εκτελούνται, αλλά στο σύγχρονο Angular η ίδια αμφίδρομη σύνδεση γράφεται ως [(ngModel)] και απαιτεί το FormsModule.
Το χαρακτηριστικό ng-model
Όπως συζητήθηκε στην παραπάνω ενότητα, το χαρακτηριστικό ng-model χρησιμοποιείται για τη σύνδεση των δεδομένων στο μοντέλο σας με την προβολή που παρουσιάζεται στον χρήστη.
Το χαρακτηριστικό ng-model χρησιμοποιείται για,
- Σύνδεση στοιχείων ελέγχου όπως εισαγωγή, περιοχή κειμένου και στοιχεία επιλογής στην προβολή στο μοντέλο.
- Παροχή μιας συμπεριφοράς επικύρωσης — για παράδειγμα, μια επικύρωση μπορεί να προστεθεί σε ένα πλαίσιο κειμένου, έτσι ώστε να μπορούν να εισαχθούν μόνο αριθμητικοί χαρακτήρες.
- Διατήρηση της κατάστασης του στοιχείου ελέγχου. Με τον όρο κατάσταση, εννοούμε ότι το στοιχείο ελέγχου και τα δεδομένα διατηρούνται πάντα συγχρονισμένα: εάν αλλάξει η τιμή των δεδομένων, η τιμή στο στοιχείο ελέγχου αλλάζει αυτόματα και αντίστροφα.
- Έκθεση αυτής της κατάστασης ως κλάσεις CSS. Το AngularJS προσθέτει
ng-pristine,ng-dirty,ng-validκαιng-invalidσε κάθε στοιχείο ελέγχου που φέρει ένα μοντέλο ng, το οποίο καθιστά απλή την υπό όρους μορφοποίηση των φορμών.
Έχοντας κατανοήσει το χαρακτηριστικό, το επόμενο βήμα είναι να το εφαρμόσετε στους τρεις τύπους ελέγχου που θα συναντήσετε πιο συχνά.
Πώς να χρησιμοποιήσετε το ng-model
1) Περιοχή κειμένου
Η ετικέτα περιοχής κειμένου χρησιμοποιείται για να ορίσει ένα στοιχείο ελέγχου εισαγωγής κειμένου πολλών γραμμών. Η περιοχή κειμένου μπορεί να περιέχει απεριόριστο αριθμό χαρακτήρων και το κείμενο αποδίδεται σε γραμματοσειρά σταθερού πλάτους.
Ας δούμε λοιπόν ένα απλό παράδειγμα για το πώς μπορούμε να προσθέσουμε την οδηγία ng-model σε ένα στοιχείο ελέγχου περιοχής κειμένου. Σε αυτό το παράδειγμα, θέλουμε να δείξουμε πώς μπορούμε να περάσουμε μια συμβολοσειρά πολλαπλών γραμμών από τον ελεγκτή στην προβολή και να επισυνάψουμε αυτήν την τιμή στο στοιχείο ελέγχου περιοχής κειμένου.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <script src="https://code.angularjs.org/1.8.3/angular.js"></script> </head> <body> <h1>Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br><br> <textarea rows="4" cols="50" ng-model="pDescription"></textarea> </form> </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoCtrl', function($scope) { $scope.pDescription = "This topic looks at how Angular JS works \nModels in Angular JS"; }); </script> </body> </html>
Code Επεξήγηση:
- The οδηγία ng-model συνδέει τη μεταβλητή-μέλος που ονομάζεται "p"Descriptιόν" στον έλεγχο "περιοχή κειμένου". Το "pDescriptΗ μεταβλητή ion” περιέχει το κείμενο που μεταβιβάζεται στον έλεγχο της περιοχής κειμένου. Η
rows="4"καιcols="50"Τα χαρακτηριστικά απλώς αλλάζουν το μέγεθος του στοιχείου ελέγχου έτσι ώστε το κείμενο πολλαπλών γραμμών να εμφανίζεται σωστά. - Η μεταβλητή-μέλος «p»Descriptστο "ιόν" έχει εκχωρηθεί μια τιμή πολλαπλών γραμμών. Το
\nΗ ακολουθία διαφυγής μέσα στη συμβολοσειρά είναι αυτή που αναγκάζει το κείμενο να μεταφερθεί σε μια δεύτερη γραμμή όταν το εμφανίζει η περιοχή κειμένου.
Παραγωγή:
Από την έξοδο, είναι σαφές ότι το κείμενο πολλαπλών γραμμών που έχει αντιστοιχιστεί στον ελεγκτή εμφανίζεται στον έλεγχο της περιοχής κειμένου, χωρισμένο σε δύο γραμμές ακριβώς εκεί που \n κάθεται.
2) Στοιχεία εισαγωγής
Η οδηγία ng-model λειτουργεί και με συνηθισμένα στοιχεία εισόδου. Παρακάτω συνδέουμε ένα πλαίσιο κειμένου και δύο πλαίσια ελέγχου ταυτόχρονα, ώστε να μπορείτε να δείτε πώς το ng-model χειρίζεται μια τιμή συμβολοσειράς και μια τιμή boolean δίπλα-δίπλα.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <script src="https://code.angularjs.org/1.8.3/angular.js"></script> </head> <body> <h1>Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br><br> Name : <input type="text" ng-model="pname"><br> Topic :<br> <input type="checkbox" ng-model="Topic.Controller">Controller<br> <input type="checkbox" ng-model="Topic.Models">Models </form> </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoCtrl', function($scope) { $scope.pname = "Guru99"; $scope.Topic = { Controller: true, Models: false }; }); </script> </body> </html>
Code Επεξήγηση:
- Η οδηγία ng-model συνδέει τη μεταβλητή-μέλος "pname" με το στοιχείο ελέγχου εισαγωγής κειμένου και τις ιδιότητες
Topic.ControllerκαιTopic.Modelsστα δύο στοιχεία ελέγχου του πλαισίου ελέγχου. - Στον ελεγκτή, στο "pname" δίνεται η συμβολοσειρά "Guru99”, και στο αντικείμενο “Θέμα” δίνονται δύο λογικά μέλη. Ένα πλαίσιο ελέγχου που συνδέεται με το ng-model διαβάζει και γράφει πάντα μια λογικά, γι' αυτό και
trueαποδίδει το πλαίσιο ως επιλεγμένο καιfalseτο αφήνει σαφές.
Παραγωγή:
Από την έξοδο,
- Μπορεί να φανεί ξεκάθαρα ότι η τιμή που αποδίδεται στο
pnameη μεταβλητή είναι «Guru99. " - Δεδομένου ότι η πρώτη ορισμένη τιμή είναι
true, το πλαίσιο ελέγχου είναι επισημασμένο για το πλαίσιο ελέγχου «Ελεγκτής». Ομοίως, επειδή η δεύτερη τιμή είναιfalse, το πλαίσιο ελέγχου δεν είναι επιλεγμένο για το πλαίσιο ελέγχου «Μοντέλα».
3) Επιλέξτε στοιχείο από το αναπτυσσόμενο μενού
Η οδηγία ng-model μπορεί επίσης να εφαρμοστεί στο στοιχείο select, έτσι ώστε το στοιχείο που επιλέγει ο χρήστης να αποθηκεύεται στο μοντέλο.
Εδώ θα έχουμε μια εισαγωγή κειμένου που περιέχει το όνομα "Guru99", και μια λίστα επιλογής με δύο στοιχεία λίστας, "Ελεγκτής" και "Μοντέλα".
⚠️ Διόρθωση: Το παραπάνω στιγμιότυπο οθόνης δείχνει την αρχική καταχώριση, η οποία συνέδεε το στοιχείο επιλογής με το ίδιο ακριβώς Topics αντικείμενο που παρείχε το κείμενο επιλογής. Τη στιγμή που ένας χρήστης επιλέγει μια επιλογή, το AngularJS αντικαθιστά Topics με την επιλεγμένη συμβολοσειρά και και οι δύο επιλογές εξαφανίζονται. Η διορθωμένη καταχώριση παρακάτω διατηρεί τη λίστα σε μία ιδιότητα και την επιλογή σε μια άλλη, και χρησιμοποιεί ng-options για να φτιάξετε τη λίστα.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <script src="https://code.angularjs.org/1.8.3/angular.js"></script> </head> <body> <h1>Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br><br> Name : <input type="text" ng-model="pName"><br> Topic :<br> <!-- Topics holds the list; selectedTopic holds the choice --> <select ng-model="selectedTopic" ng-options="t for t in Topics"></select> </form> </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoCtrl', function($scope) { $scope.pName = "Guru99"; $scope.Topics = ["Controller", "Models"]; $scope.selectedTopic = $scope.Topics[0]; }); </script> </body> </html>
Code Επεξήγηση:
- Η εισαγωγή κειμένου είναι δεσμευμένη σε
pName, και το στοιχείο select είναι δεσμευμένο σεselectedTopicΕπειδή η επιλογή έχει τη δική της ιδιότητα μοντέλου, η επιλογή μιας επιλογής δεν διαταράσσει ποτέ την ίδια τη λίστα. - The
TopicsΟ πίνακας περιέχει τις δύο τιμές «Ελεγκτής» και «Μοντέλα».ng-optionsΗ έκφραση περπατά πάνω σε αυτόν τον πίνακα και αποδίδει μία επιλογή ανά καταχώρηση, επομένως η προσθήκη ενός τρίτου θέματος δεν απαιτεί αλλαγή στη σήμανση. selectedTopicείναι προκαθορισμένη στην πρώτη καταχώρηση, η οποία είναι αυτή που κάνει το αναπτυσσόμενο μενού να ανοίγει με μια λογική προεπιλογή αντί για μια κενή γραμμή.
Παραγωγή:
Από την έξοδο, φαίνεται ότι η τιμή που έχει αποδοθεί στο pName η μεταβλητή είναι «Guru99", και το στοιχείο ελέγχου επιλογής προσφέρει τις επιλογές "Ελεγκτής" και "Μοντέλα". Πέρα από τα παραδείγματα εργασίας, οι συνδέσεις μερικές φορές αρνούνται να ενημερωθούν και αξίζει να γνωρίζουμε τους λόγους.
Γιατί οι συνδέσεις του μοντέλου ng μερικές φορές αποτυγχάνουν
Τα περισσότερα αναφερόμενα προβλήματα του μοντέλου ng δεν είναι σφάλματα στο AngularJS, αλλά συνέπειες του τρόπου λειτουργίας των πεδίων εμβέλειας και των πρωτόγονων ρυθμίσεων.
Η κλασική περίπτωση είναι μια σύνδεση τοποθετημένη μέσα σε μια οδηγία που δημιουργεί ένα θυγατρικό πεδίο εφαρμογής, όπως π.χ. ng-επανάληψη, ng-if ή ng-switch. Γράφοντας ng-model="name" δημιουργεί ένα σκιώδες αντίγραφο στο θυγατρικό πεδίο εφαρμογής, επομένως ο γονέας δεν βλέπει ποτέ την επεξεργασία. Σύνδεση σε μια ιδιότητα ενός αντικειμένου αντί αυτού — ng-model="user.name" — διατηρεί κάθε πεδίο εφαρμογής στραμμένο προς την ίδια αναφορά. Αυτός είναι ο λόγος για τον οποίο οι έμπειροι προγραμματιστές AngularJS επιμένουν σε μια τελεία σε κάθε έκφραση ng-model.
Δύο ακόμη αιτίες ευθύνονται για τα περισσότερα από τα υπόλοιπα:
- Λείπει ελεγκτής ή μονάδα: Εάν το ng-app ή το ng-controller γραφτεί λανθασμένα, η σύνδεση δεν αποδίδει τίποτα σιωπηλά αντί να εμφανίζει σφάλμα.
- Η τιμή άλλαξε εκτός AngularJS: μια τιμή που ορίζεται από έναν χειριστή jQuery ή μια επανάκληση setTimeout καταλήγει εκτός του κύκλου digest, επομένως η προβολή δεν ανανεώνεται μέχρι
$scope.$apply()τρέχει.
Ο έλεγχος αυτών των τριών πραγμάτων επιλύει τη μεγάλη πλειοψηφία των συνδέσεων που φαίνεται να μην λειτουργούν.
