AngularJS Expressions: ARRAY, Objects, $ eval, Strings (Παραδείγματα)

Πίνακας περιεχομένων:

Anonim

Τι είναι οι γωνιακές εκφράσεις JS;

Οι εκφράσεις είναι μεταβλητές που ορίστηκαν στα διπλά άγκιστρα {{}}. Χρησιμοποιούνται πολύ συχνά στο Angular JS και θα τα βλέπετε στα προηγούμενα μαθήματά μας.

Σε αυτό το σεμινάριο, θα μάθετε-

  • Εξηγήστε τις εκφράσεις Angular.js με παράδειγμα
  • Αριθμοί AngularJS
  • Χορδές AngularJS
  • Αντικείμενα AngularJS
  • Πίνακες AngularJS
  • Δυνατότητες και περιορισμοί της έκφρασης AngularJS
  • Η διαφορά μεταξύ εκφράσεων και $ eval

Εξηγήστε τις εκφράσεις Angular.js με ένα παράδειγμα

Οι εκφράσεις AngularJS είναι αυτές που γράφονται μέσα σε διπλά άγκιστρα {{expression}}.

Σύνταξη:

Ένα απλό παράδειγμα μιας έκφρασης είναι το {{5 + 6}}.

Οι εκφράσεις Angular.JS χρησιμοποιούνται για τη σύνδεση δεδομένων σε HTML με τον ίδιο τρόπο όπως η οδηγία ng-bind. Το AngularJS εμφανίζει τα δεδομένα ακριβώς στο μέρος όπου τοποθετείται η έκφραση.

Ας δούμε ένα παράδειγμα εκφράσεων Angular.JS.

Σε αυτό το παράδειγμα, θέλουμε απλώς να δείξουμε μια απλή προσθήκη αριθμών ως έκφραση.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Επεξήγηση κώδικα:

  1. Η οδηγία ng-app στο παράδειγμά μας είναι κενή όπως φαίνεται στο παραπάνω στιγμιότυπο οθόνης. Αυτό σημαίνει μόνο ότι δεν υπάρχει ενότητα για την εκχώρηση ελεγκτών, οδηγιών, υπηρεσιών που συνδέονται με τον κώδικα.
  2. Προσθέτουμε μια απλή έκφραση που εξετάζει την προσθήκη 2 αριθμών.

Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Από την έξοδο,

  • Μπορεί να φανεί ότι η προσθήκη των δύο αριθμών 9 και 6 λαμβάνει χώρα και εμφανίζεται η προστιθέμενη αξία του 15.

Γωνιακοί. Αριθμοί JS

Οι εκφράσεις μπορούν να χρησιμοποιηθούν και για τους αριθμούς. Ας δούμε ένα παράδειγμα εκφράσεων Angular.JS με αριθμούς.

Σε αυτό το παράδειγμα, απλώς θέλουμε να δείξουμε έναν απλό πολλαπλασιασμό 2 μεταβλητών αριθμών που ονομάζεται περιθώριο και κέρδος και εμφανίστηκε η πολλαπλασιασμένη τιμή τους.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Επεξήγηση κώδικα:

  1. Η οδηγία ng-init χρησιμοποιείται στο angular.js για τον καθορισμό μεταβλητών και των αντίστοιχων τιμών τους στην ίδια την προβολή. Είναι κάπως σαν τον καθορισμό τοπικών μεταβλητών για κωδικοποίηση σε οποιαδήποτε γλώσσα προγραμματισμού. Σε αυτήν την περίπτωση, ορίζουμε 2 μεταβλητές που ονομάζονται περιθώριο και κέρδος και τους αποδίδουμε τιμές.
  2. Στη συνέχεια, χρησιμοποιούμε τις 2 τοπικές μεταβλητές και πολλαπλασιάζουμε τις τιμές τους.

Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Από την έξοδο,

  • Μπορεί να φανεί καθαρά ότι ο πολλαπλασιασμός των 2 αριθμών 2 και 200 ​​λαμβάνει χώρα και εμφανίζεται η πολλαπλασιασμένη τιμή των 400.

Χορδές AngularJS

Οι εκφράσεις μπορούν να χρησιμοποιηθούν και για τις χορδές. Ας δούμε ένα παράδειγμα των γωνιακών εκφράσεων JS με χορδές.

Σε αυτό το παράδειγμα, θα ορίσουμε 2 συμβολοσειρές του "firstName" και "lastName" και θα τις εμφανίσουμε χρησιμοποιώντας εκφράσεις ανάλογα.

Event Registration

Guru99 Global Event


   First Name : {{firstName}}
   last Name : {{lastName}}

Επεξήγηση κώδικα:

  1. Η οδηγία ng-init χρησιμοποιείται ορίζει τις μεταβλητές firstName με την τιμή "Guru" και τη μεταβλητή lastName με την τιμή "99".
  2. Στη συνέχεια, χρησιμοποιούμε τις εκφράσεις των {{firstName}} και {{lastName}} για να αποκτήσουμε πρόσβαση στην τιμή αυτών των μεταβλητών και να τις εμφανίσουμε στην προβολή αναλόγως.

Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Από την έξοδο, μπορεί να φανεί καθαρά ότι οι τιμές του ονόματος πρώτου και του τελευταίου εμφανίζονται στην οθόνη.

Αντικείμενα Angular.JS

Οι εκφράσεις μπορούν να χρησιμοποιηθούν και για εργασία με αντικείμενα JavaScript.

Ας δούμε ένα παράδειγμα εκφράσεων Angular.JS με αντικείμενα javascript. Ένα αντικείμενο javascript αποτελείται από ένα ζεύγος ονόματος-τιμής.

Ακολουθεί ένα παράδειγμα της σύνταξης ενός αντικειμένου javascript.

Σύνταξη:

var car = {type:"Ford", model:"Explorer", color:"White"};

Σε αυτό το παράδειγμα, πρόκειται να ορίσουμε ένα αντικείμενο ως αντικείμενο ατόμου το οποίο θα έχει 2 ζεύγη τιμών κλειδιών "όνομα πρώτου" και "επώνυμο".

Event Registration

Guru99 Global Event


   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Επεξήγηση κώδικα:

  1. Η οδηγία ng-init χρησιμοποιείται για τον ορισμό του αντικειμένου ατόμου που με τη σειρά του έχει ζεύγη τιμών κλειδιού του πρώτου ονόματος με την τιμή "Guru" και τη μεταβλητή επώνυμο με την τιμή του "99".
  2. Στη συνέχεια, χρησιμοποιούμε εκφράσεις των {{person.firstName}} και {{person.secondName}} για να αποκτήσουμε πρόσβαση στην τιμή αυτών των μεταβλητών και να τις εμφανίσουμε στην προβολή αναλόγως. Δεδομένου ότι οι πραγματικές μεταβλητές μελών αποτελούν μέρος του αντικειμένου ατόμου, πρέπει να έχουν πρόσβαση σε αυτήν με τη σημείωση τελείας (.) Για να έχουν πρόσβαση στην πραγματική τους αξία.

Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Από την έξοδο,

  • Είναι εμφανές ότι οι τιμές των "firstName" και "secondName" εμφανίζονται στην οθόνη.

Πίνακες AngularJS

Οι εκφράσεις μπορούν να χρησιμοποιηθούν και για συστοιχίες. Ας δούμε ένα παράδειγμα των γωνιακών εκφράσεων JS με πίνακες.

Σε αυτό το παράδειγμα, πρόκειται να ορίσουμε έναν πίνακα που θα κρατάει τα σημάδια ενός μαθητή σε 3 θέματα. Στην προβολή, θα εμφανίσουμε την τιμή αυτών των σημάτων αναλόγως.

Event Registration

Guru99 Global Event


Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

Επεξήγηση κώδικα:

  1. Η οδηγία ng-init χρησιμοποιείται ορίζει τον πίνακα με το όνομα "σημάδια" με 3 τιμές των 1, 15 και 19.
  2. Στη συνέχεια, χρησιμοποιούμε εκφράσεις σημείων [index] για πρόσβαση σε κάθε στοιχείο του πίνακα.

Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Από την έξοδο, μπορεί να φανεί καθαρά ότι τα σημάδια που εμφανίζονται, που ορίζονται στον πίνακα.

Δυνατότητες και περιορισμοί της έκφρασης AngularJS

Δυνατότητες γωνιακής έκφρασης JS

  1. Οι γωνιακές εκφράσεις είναι σαν τις εκφράσεις JavaScript. Ως εκ τούτου, έχει την ίδια ισχύ και ευελιξία.
  2. Στο JavaScript, όταν προσπαθείτε να αξιολογήσετε μη καθορισμένες ιδιότητες, δημιουργεί ReferenceError ή TypeError. Στο Angular, η εκτίμηση έκφρασης είναι συγχωρετική και δημιουργεί ένα απροσδιόριστο ή μηδενικό.
  3. Κάποιος μπορεί να χρησιμοποιήσει φίλτρα μέσα σε εκφράσεις για να μορφοποιήσει δεδομένα πριν τα εμφανίσει.

Περιορισμοί γωνιακής έκφρασης JS

  1. Προς το παρόν δεν υπάρχει διαθεσιμότητα για χρήση υπό όρους, βρόχων ή εξαιρέσεων σε μια γωνιακή έκφραση
  2. Δεν μπορείτε να δηλώσετε συναρτήσεις σε μια γωνιακή έκφραση, ακόμη και μέσα σε οδηγία ng-init.
  3. Δεν μπορεί κανείς να δημιουργήσει κανονικές εκφράσεις σε μια γωνιακή έκφραση. Μια κανονική έκφραση είναι ένας συνδυασμός συμβόλων και χαρακτήρων, οι οποίοι χρησιμοποιούνται για την εύρεση συμβολοσειρών όπως. * \. Txt $. Τέτοιες εκφράσεις δεν μπορούν να χρησιμοποιηθούν σε εκφράσεις Angular JS.
  4. Επίσης, δεν μπορεί κανείς να χρησιμοποιήσει ή να ακυρώσει μια γωνιακή έκφραση.

Διαφορά μεταξύ έκφρασης και $ eval

Η συνάρτηση $ eval επιτρέπει σε κάποιον να αξιολογήσει τις εκφράσεις από τον ίδιο τον ελεγκτή. Έτσι, ενώ οι εκφράσεις χρησιμοποιούνται για αξιολόγηση στην προβολή, το $ eval χρησιμοποιείται στη λειτουργία ελεγκτή.

Ας δούμε ένα απλό παράδειγμα σε αυτό.

Σε αυτό το παράδειγμα,

Απλώς πρόκειται να χρησιμοποιήσουμε τη συνάρτηση $ eval για να προσθέσουμε 2 αριθμούς και να το διαθέσουμε στο αντικείμενο εύρους έτσι ώστε να μπορεί να εμφανιστεί στην προβολή.

Event Registration


Guru99 Global Event

{{value}}

Επεξήγηση κώδικα:

  1. Πρώτα ορίζουμε 2 μεταβλητές «a» και «b», καθεμία από τις οποίες έχει τιμή 1.
  2. Χρησιμοποιούμε τη συνάρτηση $. $ Eval για να αξιολογήσουμε την προσθήκη των 2 μεταβλητών και να την αντιστοιχίσουμε στη μεταβλητή εύρους «τιμή».
  3. Στη συνέχεια, απλώς προβάλλουμε την τιμή της μεταβλητής «τιμή» στην προβολή.

Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Η παραπάνω έξοδος δείχνει την έξοδο της έκφρασης που αξιολογήθηκε στον ελεγκτή. Τα παραπάνω αποτελέσματα δείχνουν ότι η έκφραση $ eval χρησιμοποιήθηκε για την εκτέλεση της προσθήκης των 2 μεταβλητών πεδίου «a και b» με το αποτέλεσμα να αποστέλλεται και να εμφανίζεται στην προβολή.

Περίληψη:

  • Έχουμε δει πώς μπορούν να χρησιμοποιηθούν οι εκφράσεις στο Angular JS για την αξιολόγηση κανονικών JavaScript όπως εκφράσεις όπως η απλή προσθήκη αριθμών.
  • Η οδηγία ng-init μπορεί να χρησιμοποιηθεί για τον καθορισμό μεταβλητών in-line που μπορούν να χρησιμοποιηθούν στην προβολή.
  • Οι εκφράσεις μπορούν να χρησιμοποιηθούν για να λειτουργούν με πρωτόγονους τύπους όπως χορδές και αριθμούς.
  • Οι εκφράσεις μπορούν επίσης να χρησιμοποιηθούν για την εργασία με άλλους τύπους, όπως αντικείμενα JavaScript και πίνακες.
  • Οι εκφράσεις στο Angular JS έχουν μερικούς περιορισμούς, όπως για παράδειγμα να μην έχουν κανονικές εκφράσεις ή να χρησιμοποιούν λειτουργίες, βρόχους ή δηλώσεις υπό όρους.