Τι είναι το φίλτρο στο AngularJS;
Ένα φίλτρο στο AngularJS βοηθά στη διαμόρφωση της τιμής μιας έκφρασης που θα εμφανίζεται στον χρήστη χωρίς να αλλάζει η αρχική μορφή. Για παράδειγμα, εάν θέλετε τη συμβολοσειρά σας σε πεζά ή κεφαλαία γράμματα, μπορείτε να το κάνετε χρησιμοποιώντας φίλτρα. Υπάρχουν ενσωματωμένα φίλτρα όπως «πεζά», «κεφαλαία», τα οποία μπορούν να ανακτήσουν την κεφαλαία και κεφαλαία έξοδο ανάλογα.
Ομοίως, για αριθμούς, μπορείτε να χρησιμοποιήσετε άλλα φίλτρα.
Κατά τη διάρκεια αυτού του σεμιναρίου, θα δούμε τα διαφορετικά τυπικά ενσωματωμένα φίλτρα που διατίθενται στο Angular.
Σε αυτό το σεμινάριο, θα μάθετε-
- Πεζά φίλτρα σε AngularJS
- Με κεφαλαίο φίλτρο σε AngularJS
- Φίλτρο αριθμών σε AngularJS
- Φίλτρο νομίσματος σε AngularJS
- Φίλτρο JSON σε γωνιακόJS
Πεζά φίλτρα σε AngularJS
Αυτό το φίλτρο λαμβάνει μια έξοδο συμβολοσειράς και μορφοποιεί τη συμβολοσειρά και εμφανίζει όλους τους χαρακτήρες στη συμβολοσειρά ως πεζά.
Ας δούμε ένα παράδειγμα φίλτρων AngularJS με την επιλογή AngularJS tolowercase.
Στο παρακάτω παράδειγμα, θα χρησιμοποιήσουμε έναν ελεγκτή για να στείλουμε μια συμβολοσειρά σε μια προβολή μέσω του αντικειμένου πεδίου. Στη συνέχεια, θα χρησιμοποιήσουμε ένα φίλτρο στην προβολή για να μετατρέψουμε τη συμβολοσειρά σε πεζά.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Επεξήγηση κώδικα:
- Εδώ περνάμε μια συμβολοσειρά, η οποία είναι ένας συνδυασμός πεζών και κεφαλαίων χαρακτήρων σε μια μεταβλητή μέλους που ονομάζεται "tutorialName" και την επισυνάπτουμε στο αντικείμενο πεδίου. Η τιμή της συμβολοσειράς που περνά είναι "AngularJS".
- Χρησιμοποιούμε τη μεταβλητή μέλους "tutorialName" και βάζουμε ένα σύμβολο φίλτρου (|) που σημαίνει ότι η έξοδος πρέπει να τροποποιηθεί χρησιμοποιώντας ένα φίλτρο. Στη συνέχεια, χρησιμοποιούμε την πεζά λέξη-κλειδί για να πούμε ότι χρησιμοποιούμε το ενσωματωμένο φίλτρο για την έξοδο ολόκληρης της συμβολοσειράς με πεζά.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο
- Μπορεί να φανεί ότι η συμβολοσειρά "AngularJS" που πέρασε στο μεταβλητό tutorialName που ήταν ένας συνδυασμός πεζών και κεφαλαίων χαρακτήρων έχει εκτελεστεί.
- Μετά την εκτέλεση, η τελική έξοδος είναι πεζά όπως φαίνεται παραπάνω.
Με κεφαλαίο φίλτρο σε AngularJS
Αυτό το φίλτρο είναι παρόμοιο με το πεζικό φίλτρο. η διαφορά είναι ότι παίρνει μια έξοδο συμβολοσειράς και μορφοποιεί τη συμβολοσειρά και εμφανίζει όλους τους χαρακτήρες στη συμβολοσειρά ως κεφαλαία.
Ας δούμε ένα παράδειγμα φίλτρου κεφαλαιοποίησης AngularJS με την πεζά επιλογή.
Στο παρακάτω παράδειγμα κεφαλαίων AngularJS, θα χρησιμοποιήσουμε έναν ελεγκτή για να στείλουμε μια συμβολοσειρά σε μια προβολή μέσω του αντικειμένου πεδίου. Στη συνέχεια, θα χρησιμοποιήσουμε ένα φίλτρο στην προβολή για να μετατρέψουμε τη συμβολοσειρά σε κεφαλαία.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Επεξήγηση κώδικα:
- Εδώ περνάμε μια συμβολοσειρά που είναι ένας συνδυασμός πεζών και κεφαλαίων χαρακτήρων "Angular JS" σε μια μεταβλητή μέλους που ονομάζεται "tutorialName" και την επισυνάπτουμε στο αντικείμενο πεδίου.
- Χρησιμοποιούμε τη μεταβλητή μέλους "tutorialName" και βάζουμε ένα σύμβολο φίλτρου (|), που σημαίνει ότι η έξοδος πρέπει να τροποποιηθεί χρησιμοποιώντας ένα φίλτρο. Στη συνέχεια, χρησιμοποιούμε την κεφαλαία λέξη-κλειδί για να πούμε ότι χρησιμοποιούμε το ενσωματωμένο φίλτρο για να εξάγουμε ολόκληρη τη συμβολοσειρά με κεφαλαία γράμματα.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο,
- Μπορεί να φανεί ότι η συμβολοσειρά που μεταβιβάστηκε στο μεταβλητό tutorialName που ήταν ένας συνδυασμός πεζών και κεφαλαίων χαρακτήρων έχει εξαχθεί σε όλα τα κεφαλαία.
Φίλτρο αριθμών σε AngularJS
Αυτό το φίλτρο μορφοποιεί έναν αριθμό και μπορεί να εφαρμόσει ένα όριο στα δεκαδικά ψηφία για έναν αριθμό.
Ας δούμε ένα παράδειγμα φίλτρων AngularJS με την επιλογή αριθμού.
Στο παρακάτω παράδειγμα,
Θέλαμε να δείξουμε πώς μπορούμε να χρησιμοποιήσουμε το φίλτρο αριθμών για να μορφοποιήσουμε έναν αριθμό για εμφάνιση με περιορισμό 2 δεκαδικών ψηφίων.
Θα χρησιμοποιήσουμε έναν ελεγκτή για να στείλουμε έναν αριθμό σε μια προβολή μέσω του αντικειμένου πεδίου. Στη συνέχεια, θα χρησιμοποιήσουμε ένα φίλτρο στην προβολή για να εφαρμόσουμε το φίλτρο αριθμών.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Επεξήγηση κώδικα:
- Εδώ περνάμε έναν αριθμό με μεγαλύτερο αριθμό δεκαδικών ψηφίων σε μια μεταβλητή μέλους που ονομάζεται tutorialID και την επισυνάπτουμε στο αντικείμενο πεδίου.
- Χρησιμοποιούμε τη μεταβλητή μέλους tutorialID και βάζουμε ένα σύμβολο φίλτρου (|) μαζί με το φίλτρο αριθμών. Τώρα σε αριθμό: 2, τα δύο υποδεικνύουν ότι το φίλτρο πρέπει να περιορίσει τον αριθμό των δεκαδικών ψηφίων σε 2.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο,
- Μπορεί να φανεί ότι ο αριθμός που πέρασε στη μεταβλητή tutorialID που είχε μεγάλο αριθμό δεκαδικών σημείων περιορίστηκε σε 2 δεκαδικά ψηφία λόγω του αριθμού: 2 φίλτρα που εφαρμόστηκαν.
Φίλτρο νομίσματος σε AngularJS
Αυτό το φίλτρο μορφοποιεί ένα φίλτρο νομίσματος σε έναν αριθμό.
Ας υποθέσουμε, εάν θέλετε να εμφανίσετε έναν αριθμό με ένα νόμισμα όπως το $, τότε αυτό το φίλτρο μπορεί να χρησιμοποιηθεί.
Στο παρακάτω παράδειγμα θα χρησιμοποιήσουμε έναν ελεγκτή για να στείλουμε έναν αριθμό σε μια προβολή μέσω του αντικειμένου πεδίου. Στη συνέχεια, θα χρησιμοποιήσουμε ένα φίλτρο στην προβολή για να εφαρμόσουμε το τρέχον φίλτρο.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Επεξήγηση κώδικα:
- Εδώ περνάμε έναν αριθμό σε μια μεταβλητή μέλους που ονομάζεται tutorialprice και τον συνδέουμε με το αντικείμενο πεδίου.
- Χρησιμοποιούμε την τιμή εκμάθησης μεταβλητής μέλους και βάζουμε ένα σύμβολο φίλτρου (|) μαζί με το φίλτρο νομίσματος. Σημειώστε ότι το νόμισμα που εφαρμόζεται εξαρτάται από τις ρυθμίσεις γλώσσας που εφαρμόζονται στο μηχάνημα.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο
- Μπορεί να φανεί ότι το σύμβολο νομίσματος έχει προσαρτηθεί στον αριθμό που πέρασε στη μεταβλητή τιμή tutorial.
- Στην περίπτωσή μας, δεδομένου ότι οι ρυθμίσεις γλώσσας είναι Αγγλικά (Ηνωμένες Πολιτείες), το σύμβολο $ εισάγεται ως νόμισμα.
Φίλτρο JSON σε γωνιακόJS
Αυτό το φίλτρο διαμορφώνει μια είσοδο τύπου JSON και εφαρμόζει το φίλτρο AngularJS JSON για να δώσει την έξοδο σε JSON.
Στο παρακάτω παράδειγμα θα χρησιμοποιήσουμε έναν ελεγκτή για να στείλουμε ένα αντικείμενο τύπου JSON σε μια προβολή μέσω του αντικειμένου πεδίου. Στη συνέχεια, θα χρησιμοποιήσουμε ένα φίλτρο στην προβολή για να εφαρμόσουμε το φίλτρο JSON.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Επεξήγηση κώδικα:
- Εδώ περνάμε έναν αριθμό σε μια μεταβλητή μέλους που ονομάζεται "φροντιστήριο" και τον συνδέουμε με το αντικείμενο πεδίου. Αυτή η μεταβλητή μέλους περιέχει μια συμβολοσειρά τύπου JSON του Αναγνωριστικού Tutorial: 12 και του Όνομα Tutorial: "Angular".
- Χρησιμοποιούμε τον οδηγό μεταβλητής μέλους και βάζουμε ένα σύμβολο φίλτρου (|) μαζί με το φίλτρο JSON.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο,
- Μπορεί να φανεί ότι το JSON σαν μια συμβολοσειρά αναλύεται και εμφανίζεται ένα κατάλληλο αντικείμενο JSON στο πρόγραμμα περιήγησης.
Περίληψη:
- Τα φίλτρα χρησιμοποιούνται για να αλλάξουν τον τρόπο εμφάνισης της εξόδου στον χρήστη.
- Το Angular παρέχει ενσωματωμένα φίλτρα όπως τα πεζά και κεφαλαία φίλτρα για να αλλάξουν την έξοδο των χορδών σε χαμηλότερα και κεφαλαία αντίστοιχα.
- Υπάρχει επίσης μια διάταξη για την αλλαγή του τρόπου εμφάνισης των αριθμών χρησιμοποιώντας το φίλτρο αριθμών καθορίζοντας τον αριθμό των δεκαδικών σημείων που θα εμφανίζονται στον αριθμό.
- Κάποιος μπορεί επίσης να χρησιμοποιήσει το φίλτρο νομίσματος για να προσθέσει το σύμβολο νομίσματος σε οποιονδήποτε αριθμό.
- Εάν υπάρχει απαίτηση να υπάρχει ειδική έξοδος json, η γωνιακή παρέχει επίσης το φίλτρο JSON για φιλτράρισμα οποιασδήποτε συμβολοσειράς JSON σε μορφή JSON.