Φίλτρα AngularJS & Προσαρμοσμένο φίλτρο AngularJS με Παράδειγμα
Τζέιμς Χάρτμαν
⚡ Έξυπνη Σύνοψη
Ένα φίλτρο στο AngularJS μορφοποιεί την τιμή μιας έκφρασης για εμφάνιση χωρίς να τροποποιεί τα υποκείμενα δεδομένα. Τα ενσωματωμένα φίλτρα καλύπτουν την γραφή πεζών-κεφαλαίων, αριθμών, νομισμάτων και JSON, ενώ ένα προσαρμοσμένο φίλτρο χειρίζεται οποιονδήποτε κανόνα μορφοποίησης δεν παρέχει ήδη το πλαίσιο.
Τι είναι το φίλτρο στο AngularJS;
A Φιλτράρισμα στο AngularJS βοηθά στη μορφοποίηση της τιμής μιας έκφρασης για εμφάνιση στον χρήστη χωρίς να αλλάξει η αρχική τιμή. Για παράδειγμα, εάν θέλετε μια συμβολοσειρά να εμφανίζεται είτε με πεζά είτε με κεφαλαία γράμματα, μπορείτε να το κάνετε χρησιμοποιώντας φίλτρα. Τα ενσωματωμένα φίλτρα, όπως «πεζά» και «κεφαλαία», επιστρέφουν τη συμβολοσειρά στην ζητούμενη κεφαλαία γράμματα και υπάρχουν περαιτέρω φίλτρα για αριθμούς, νομίσματα και JSON.
⚠️ Σημείωση έκδοσης: Το AngularJS (ο κλάδος 1.x) έφτασε στο τέλος της διάρκειας ζωής του στις 31 Δεκεμβρίου 2021 και δεν λαμβάνει περαιτέρω ενημερώσεις ασφαλείας. Όλα τα παρακάτω παραμένουν ακριβή για τη διατήρηση των υπαρχουσών εφαρμογών AngularJS. Στο σύγχρονο Angular ο ίδιος ρόλος καλύπτεται από μια διοχέτευση.
Τα φίλτρα εφαρμόζονται στην προβολή με τον χαρακτήρα pipe. Πριν εξετάσετε το καθένα, είναι χρήσιμο να μάθετε γιατί θα γράφατε τα δικά σας.
Φίλτρο πεζών γραμμάτων στο AngularJS
Αυτό το φίλτρο δέχεται μια συμβολοσειρά και εμφανίζει όλους τους χαρακτήρες της με πεζά γράμματα.
Παρακάτω, ένας ελεγκτής στέλνει μια συμβολοσειρά στην προβολή μέσω του αντικειμένου scope και ένα φίλτρο τη μετατρέπει σε πεζά γράμματα.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | lowercase}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script> </body> </html>
Code εξήγηση
- Η συμβολοσειρά μικτής πεζής-κεφαλαίας «Angular JS» τοποθετείται σε μια μεταβλητή-μέλος που ονομάζεται
tutorialNameστο αντικείμενο πεδίου εφαρμογής. - Το σύμβολο φίλτρου (|) σηματοδοτεί την έξοδο για μετασχηματισμό και το
lowercaseΗ λέξη-κλειδί εφαρμόζει το ενσωματωμένο φίλτρο που αποδίδει ολόκληρη τη συμβολοσειρά με πεζά γράμματα.
⚠️ Διορθώσεις εφαρμόστηκαν σε κάθε καταχώριση. Και τα έξι αρχικά παραδείγματα είχαν τρία κοινά ελαττώματα. chrset="UTF 8" δεν είναι έγκυρο χαρακτηριστικό ή κωδικοποίηση και τώρα είναι charset="UTF-8". angular-route.js φορτωμένος πριν angular.min.js, το οποίο εμφανίζει ένα σφάλμα ενότητας και δεν χρησιμοποιήθηκε ποτέ — έχει αφαιρεθεί, όπως και η αχρησιμοποίητη αναφορά jQuery. Το κείμενο ισχυριζόταν επίσης ότι η τιμή ήταν "AngularJS" ενώ ο κώδικας ορίστηκε ως "Angular JS". Το κείμενο τώρα ταιριάζει.
Παραγωγή:
Η συμβολοσειρά μεικτών πεζών-κεφαλαίων αποδίδεται εξ ολοκλήρου με πεζά γράμματα. Ο αντίθετος μετασχηματισμός λειτουργεί με τον ίδιο τρόπο.
Φίλτρο κεφαλαίων γραμμάτων στο AngularJS
Αυτό το φίλτρο είναι το αντίστοιχο του φίλτρου πεζών γραμμάτων, εμφανίζοντας κάθε χαρακτήρα με κεφαλαία γράμματα.
Παρακάτω, ένας ελεγκτής στέλνει μια συμβολοσειρά στην προβολή μέσω του αντικειμένου scope και ένα φίλτρο τη μετατρέπει σε κεφαλαία γράμματα.
<!-- The head and library references are unchanged from the previous example --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | uppercase}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script>
Code εξήγηση
- Η συμβολοσειρά μικτής πεζής-κεφαλαίας «Angular JS» τοποθετείται σε
tutorialNameκαι προσαρτημένο στο αντικείμενο πεδίου εφαρμογής. - Το σύμβολο φίλτρου (|) ακολουθείται από το
uppercaseλέξη-κλειδί, επομένως το ενσωματωμένο φίλτρο αποδίδει ολόκληρη τη συμβολοσειρά με κεφαλαία γράμματα.
⚠️ διόρθωση: Το αρχικό κείμενο παρουσίαζε αυτήν την ενότητα ως «ένα παράδειγμα φίλτρου κεφαλαιοποίησης AngularJS με την επιλογή πεζών γραμμάτων», κάτι που είναι λάθος δύο φορές. Αυτή η ενότητα παρουσιάζει το φίλτρο κεφαλαίων γραμμάτων και το AngularJS δεν έχει καθόλου φίλτρο κεφαλαιοποίησης — η κεφαλαιοποίηση μόνο του πρώτου γράμματος απαιτεί ένα προσαρμοσμένο φίλτρο, το οποίο οι επόμενες ενότητες δείχνουν πώς να δημιουργήσετε.
Παραγωγή:
Τα φίλτρα πεζών-κεφαλαίων δεν δέχονται ορίσματα. Το επόμενο φίλτρο δείχνει πώς μια άνω και κάτω τελεία μεταβιβάζει μια παράμετρο σε ένα φίλτρο.
Φίλτρο αριθμών στο AngularJS
Αυτό το φίλτρο μορφοποιεί έναν αριθμό και μπορεί να περιορίσει τον αριθμό των δεκαδικών ψηφίων που εμφανίζονται.
Το παρακάτω παράδειγμα χρησιμοποιεί το φίλτρο αριθμών για να εμφανίσει μια τιμή που περιορίζεται σε δύο δεκαδικά ψηφία. Ένας ελεγκτής στέλνει τον αριθμό στην προβολή μέσω του αντικειμένου scope και το φίλτρο εφαρμόζεται στην προβολή.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialID = 3.565656; }]); </script>
Code εξήγηση
- Ένας αριθμός με πολλά δεκαδικά ψηφία τοποθετείται σε μια μεταβλητή-μέλος που ονομάζεται
tutorialIDκαι προσαρτημένο στο αντικείμενο πεδίου εφαρμογής. - Το σύμβολο φίλτρου (|) ακολουθείται από
number:2Η άνω και κάτω τελεία μεταβιβάζει ένα όρισμα και το 2 ορίζει δύο δεκαδικά ψηφία. Η τιμή στρογγυλοποιείται για εμφάνιση, επομένως το 3.565656 εμφανίζεται ως 3.57 ενώ το πεδίο εφαρμογής διατηρεί τον πλήρη αριθμό.
Παραγωγή:
Η μορφοποίηση ενός απλού αριθμού συχνά δεν επαρκεί όταν η τιμή αντιπροσωπεύει χρήματα, κάτι που χειρίζεται το επόμενο φίλτρο.
Φίλτρο νομίσματος στο AngularJS
Αυτό το φίλτρο μορφοποιεί έναν αριθμό ως τιμή νομίσματος, προσθέτοντάς του ένα σύμβολο νομίσματος, όπως $.
Στο παρακάτω παράδειγμα, ένας ελεγκτής στέλνει έναν αριθμό στην προβολή μέσω του αντικειμένου scope και το φίλτρο νομισμάτων εφαρμόζεται στην προβολή.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialprice = 20.56; }]); </script>
Code εξήγηση
- Ένας αριθμός τοποθετείται σε μια μεταβλητή-μέλος που ονομάζεται
tutorialpriceκαι προσαρτημένο στο αντικείμενο πεδίου εφαρμογής. - Το σύμβολο φίλτρου (|) ακολουθείται από το
currencyφίλτρο.
⚠️ διόρθωση: Το αρχικό ισχυρίστηκε ότι το νόμισμα «εξαρτάται από τις ρυθμίσεις γλώσσας που εφαρμόζονται στο μηχάνημα». Δεν ισχύει κάτι τέτοιο. Το AngularJS χρησιμοποιεί τις τοπικές ρυθμίσεις που περιλαμβάνονται στη βιβλιοθήκη, en-US από προεπιλογή, επομένως το σύμβολο είναι $ ανεξάρτητα από το λειτουργικό σύστημα. Φορτώστε το αντίστοιχο angular-locale_*.js αρχείο ή μεταβιβάστε το σύμβολο απευθείας: {{tutorialprice | currency:"£"}}.
Παραγωγή:
Οι συμβολοσειρές και οι αριθμοί είναι απλές τιμές. Το τελικό ενσωματωμένο φίλτρο ασχολείται με ολόκληρα αντικείμενα.
Φίλτρο JSON στο AngularJS
Αυτό το φίλτρο μετατρέπει ένα αντικείμενο σε ένα μορφοποιημένο JSON συμβολοσειρά, η οποία είναι χρήσιμη για την επιθεώρηση δεδομένων εμβέλειας κατά την ανάπτυξη.
Στο παρακάτω παράδειγμα, ένας ελεγκτής στέλνει ένα αντικείμενο στην προβολή μέσω του αντικειμένου scope και το φίλτρο JSON εφαρμόζεται στην προβολή.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" }; }]); </script>
Code εξήγηση
- Ένα αντικείμενο που κρατά
TutorialID: 12καιtutorialName: "Angular"τοποθετείται σε μια μεταβλητή-μέλος που ονομάζεταιtutorialκαι προσαρτημένο στο αντικείμενο πεδίου εφαρμογής. - Το σύμβολο φίλτρου (|) ακολουθείται από το
jsonφίλτρο, το οποίο σειριοποιεί το αντικείμενο σε κείμενο JSON με εσοχή.
⚠️ διόρθωση: Το πρωτότυπο περιέγραφε αυτήν την τιμή ως «αριθμό» και ως «συμβολοσειρά τύπου JSON». Δεν είναι ούτε το ένα ούτε το άλλο. Είναι ένα Javaαντικείμενο script και το φίλτρο json είναι αυτό που το μετατρέπει σε συμβολοσειρά JSON για εμφάνιση.
Παραγωγή:
Αυτά τα πέντε φίλτρα καλύπτουν τις συνηθισμένες περιπτώσεις. Όταν κανένα δεν παράγει το αποτέλεσμα που χρειάζεστε, γράφετε το δικό σας.
Προσαρμοσμένο φίλτρο AngularJS
Μερικές φορές, τα ενσωματωμένα φίλτρα στο AngularJS δεν μπορούν να ικανοποιήσουν τις απαιτήσεις για τη μορφοποίηση της εξόδου. Σε αυτήν την περίπτωση, μπορεί να δημιουργηθεί ένα προσαρμοσμένο φίλτρο AngularJS, το οποίο επιστρέφει την έξοδο με τον απαιτούμενο τρόπο.
Ένα προσαρμοσμένο φίλτρο καταχωρείται σε μια ενότητα και στη συνέχεια συμπεριφέρεται ακριβώς όπως ένα ενσωματωμένο. Οι παρακάτω ενότητες καλύπτουν πρώτα τα τυπικά φίλτρα, καθώς ένα προσαρμοσμένο φίλτρο χρησιμοποιεί την ίδια σύνταξη pipe και στη συνέχεια δείχνουν πώς να δημιουργήσετε ένα.
Πώς να δημιουργήσετε προσαρμοσμένο φίλτρο στο AngularJS
Στο παρακάτω παράδειγμα, μια συμβολοσειρά περνάει από το ελεγκτής στην προβολή μέσω του αντικειμένου scope, αλλά δεν θα πρέπει να εμφανίζεται ως έχει. Ένα προσαρμοσμένο φίλτρο στο AngularJS προσθέτει μια άλλη συμβολοσειρά και εμφανίζει το ολοκληρωμένο αποτέλεσμα.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script> var app = angular.module('DemoApp', []); // The factory runs once; the function it returns runs on every value app.filter('Demofilter', function() { return function(input) { return input + " Tutorial"; }; }); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = "Angular"; }]); </script>
Code εξήγηση
- Η συμβολοσειρά «Angular» τοποθετείται σε μια μεταβλητή-μέλος που ονομάζεται
tutorialκαι προσαρτημένο στο αντικείμενο πεδίου εφαρμογής. - Το AngularJS παρέχει το
filterμέθοδος εγγραφής που χρησιμοποιείται για τη δημιουργία ενός προσαρμοσμένου φίλτρου. Το όνομα που του δίνεται είναι «Demofilter» και σε αυτό το όνομα αναφέρεται η προβολή. - Αυτό είναι το τυπικό σχήμα ενός προσαρμοσμένου φίλτρου: η καταχωρημένη συνάρτηση είναι μια εργοστάσιο επιστρέφοντας τη συνάρτηση που εκτελεί την εργασία. Αυτή η συνάρτηση λαμβάνει την τιμή που φιλτράρεται ως πρώτη παράμετρο και επιστρέφει το αποτέλεσμα — εδώ, την είσοδο με προσαρτημένο το "Tutorial".
- Το φίλτρο εφαρμόζεται στην προβολή χρησιμοποιώντας την ίδια σύνταξη διοχέτευσης όπως οποιοδήποτε ενσωματωμένο φίλτρο.
💡 Συμβουλή: Τα ονόματα των φίλτρων είναι συμβατικά πεζά ή camel-camel. Το 'Demofilter' λειτουργεί, αλλά ένα όνομα όπως appendTutorial διαβάζεται καλύτερα και αποφεύγει τη σύγκρουση με ένα ενσωματωμένο όνομα.
Παραγωγή:
Η λέξη «Tutorial» έχει προστεθεί στη συμβολοσειρά που έχει περάσει στο tutorial μεταβλητή. Αυτό το φίλτρο προσθέτει πάντα το ίδιο κείμενο, το οποίο η επόμενη ενότητα καθιστά διαμορφώσιμο.
Πώς να μεταβιβάσετε ορίσματα σε ένα προσαρμοσμένο φίλτρο
Το παραπάνω φίλτρο κωδικοποιεί το κείμενο που προσθέτει, επομένως μπορεί να κάνει μόνο ένα πράγμα. Ενσωματωμένα φίλτρα όπως number:2 αποδεχτείτε ένα όρισμα μετά από άνω και κάτω τελεία, και ένα προσαρμοσμένο φίλτρο μπορεί επίσης: κάθε παράμετρος μετά την πρώτη αντιστοιχεί σε ένα όρισμα διαχωρισμένο με άνω και κάτω τελεία στην προβολή.
Περιλαμβάνονται τρία βήματα: προσθήκη παραμέτρων μετά input Στη συνάρτηση που επιστρέφεται, παρέχετε μια προεπιλογή για οτιδήποτε είναι προαιρετικό, ώστε το φίλτρο να εξακολουθεί να λειτουργεί όταν παραλείπεται το όρισμα και, στη συνέχεια, διαβιβάστε τα ορίσματα στην προβολή χωρισμένα με άνω και κάτω τελείες.
app.filter('appendText', function() { return function(input, suffix, separator) { if (!input) { return input; } // guard against undefined separator = typeof separator === 'undefined' ? ' ' : separator; return input + separator + suffix; }; });
Η προβολή έχει ως εξής, όπου το "Tutorial" γίνεται suffix και η παύλα γίνεται separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
Δύο λεπτομέρειες είναι εύκολο να παραβλεφθούν. Τα ορίσματα είναι εκφράσεις AngularJS, επομένως μια συμβολοσειρά κυριολεκτικών εντολών πρέπει να μπαίνει σε εισαγωγικά, ενώ μια λέξη χωρίς εισαγωγικά διαβάζεται ως ιδιότητα εμβέλειας. Τα φίλτρα επίσης σχηματίζουν μια αλυσίδα, λαμβάνοντας το καθένα την έξοδο του προηγούμενου: {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ Προειδοποίηση: Διατήρηση ενός φίλτρου καθαρού — ίδια έξοδος για την ίδια είσοδο, χωρίς εξωτερικές αλλαγές. Το AngularJS αποθηκεύει προσωρινά ένα καθαρό φίλτρο και το εκτελεί ξανά μόνο όταν αλλάζει η είσοδος. Ένα φίλτρο που διαβάζει το ρολόι ή μεταλλάσσει μια υπηρεσία πρέπει να επισημαίνεται $stateful, το οποίο απενεργοποιεί την προσωρινή αποθήκευση και εκτελεί το φίλτρο σε κάθε κύκλο σύνοψης, μια κοινή αιτία αργής ροής σελίδων.
Τα φίλτρα δεν περιορίζονται σε πρότυπα. Το ίδιο φίλτρο μπορεί να κληθεί από JavaΣενάριο, όπως φαίνεται στη συνέχεια.
Πώς να χρησιμοποιήσετε φίλτρα σε έναν ελεγκτή με την υπηρεσία $filter
Η εφαρμογή ενός φίλτρου στην προβολή είναι η συνηθισμένη περίπτωση, αλλά η μετασχηματισμένη τιμή μερικές φορές χρειάζεται μέσα στον ελεγκτή, για παράδειγμα πριν από την αποστολή δεδομένων σε έναν διακομιστή. Το AngularJS εκθέτει κάθε καταχωρημένο φίλτρο, ενσωματωμένο και προσαρμοσμένο, μέσω του $filter υπηρεσία. Εισάγετε την, καλέστε την με το όνομα φίλτρου για να ανακτήσετε τη συνάρτηση φίλτρου και, στη συνέχεια, καλέστε την με την τιμή και τυχόν ορίσματα.
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.tutorial = "Angular"; // Built-in filters, called from JavaScript $scope.shouted = $filter('uppercase')($scope.tutorial); // "ANGULAR" $scope.price = $filter('currency')(20.56); // "$20.56" // A custom filter works exactly the same way $scope.full = $filter('appendText')($scope.tutorial, "Tutorial"); }]);
Υπάρχει επίσης μια συντομότερη μορφή: εισαγωγή του ονόματος φίλτρου ακολουθούμενου από Filter, Όπως uppercaseFilter, παρέχει απευθείας τη συνάρτηση φίλτρου και μπορεί να κληθεί αμέσως. Και οι δύο μορφές καταλήγουν στην ίδια συνάρτηση, επομένως η επιλογή είναι στυλιστική.
Δύο χρήσεις εμφανίζονται επανειλημμένα. Η πρώτη είναι η προετοιμασία ενός ωφέλιμου φορτίου: μια ημερομηνία συνήθως πρέπει να φτάσει σε ένα API με ένα σταθερό μοτίβο, και $filter('date')(value, 'yyyy-MM-dd') το παράγει χωρίς να αγγίξει την τιμή που είναι συνδεδεμένη με τη φόρμα. Το δεύτερο είναι να περιορίσει μια συλλογή μία φορά στον ελεγκτή, αντί να αφήνει orderBy σε ένα ng-επανάληψη έκφραση όπου επαναλαμβάνεται σε κάθε σύνοψη.
Τα φίλτρα που εισάγονται με αυτόν τον τρόπο εξακολουθούν να καταχωρούνται στην ενότητα, επομένως ένα προσαρμοσμένο φίλτρο πρέπει να δηλωθεί με app.filter πριν ζητήσει οποιοσδήποτε ελεγκτής $filter για αυτό. Διαφορετικά, το AngularJS εμφανίζει ένα άγνωστο σφάλμα παρόχου.
Κλήση ενός φίλτρου JavaΤο σενάριο διαφέρει από ένα πρότυπο με έναν σημαντικό τρόπο: το αποτέλεσμα υπολογίζεται μία φορά και αποθηκεύεται στο πεδίο εφαρμογής αντί να υπολογίζεται εκ νέου σε κάθε digest. Αυτό το καθιστά την ταχύτερη επιλογή για μια τιμή που σπάνια αλλάζει και τη λανθασμένη επιλογή για μια τιμή που πρέπει να αλλάζει. track είσοδος χρήστη.
