Μερικές φορές τα ενσωματωμένα φίλτρα στο Angular δεν μπορούν να ικανοποιήσουν τις ανάγκες ή τις απαιτήσεις για φιλτράρισμα της εξόδου. Σε μια τέτοια περίπτωση μπορεί να δημιουργηθεί ένα προσαρμοσμένο φίλτρο που μπορεί να περάσει την έξοδο με τον απαιτούμενο τρόπο.
Τρόπος δημιουργίας προσαρμοσμένου φίλτρου
Στο παρακάτω παράδειγμα πρόκειται να περάσουμε μια συμβολοσειρά στην προβολή από τον ελεγκτή μέσω του αντικειμένου πεδίου, αλλά δεν θέλουμε να εμφανίζεται η συμβολοσειρά ως έχει.
Θέλουμε να διασφαλίσουμε ότι κάθε φορά που προβάλλουμε τη συμβολοσειρά, περνάμε ένα προσαρμοσμένο φίλτρο το οποίο θα προσαρτά μια άλλη συμβολοσειρά και θα εμφανίζει την ολοκληρωμένη συμβολοσειρά στον χρήστη.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | Demofilter}}
Επεξήγηση κώδικα:
- Εδώ περνάμε μια συμβολοσειρά "Γωνιακή" σε μια μεταβλητή μέλους που ονομάζεται tutorial και την προσαρτάμε στο αντικείμενο πεδίου.
- Η Angular παρέχει την υπηρεσία φίλτρου που μπορεί να χρησιμοποιηθεί για τη δημιουργία του προσαρμοσμένου φίλτρου μας. Το «Demofilter» είναι ένα όνομα που δίνεται στο φίλτρο μας.
- Αυτός είναι ο τυπικός τρόπος με τον οποίο καθορίζεται ένα προσαρμοσμένο φίλτρο όπου επιστρέφεται μια συνάρτηση. Αυτή η λειτουργία είναι εκείνη που περιέχει τον προσαρμοσμένο κώδικα για τη δημιουργία του προσαρμοσμένου φίλτρου. Στη λειτουργία μας, παίρνουμε μια συμβολοσειρά "Γωνιακή" η οποία μεταφέρεται από την άποψή μας στο φίλτρο και προσθέτουμε τη συμβολοσειρά "Tutorial" σε αυτό.
- Χρησιμοποιούμε το Demofilter στη μεταβλητή μέλους που μεταβιβάστηκε από τον ελεγκτή στην προβολή.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο,
- Είναι εμφανές ότι το προσαρμοσμένο φίλτρο μας έχει εφαρμοστεί και
- Η λέξη «Tutorial» έχει επισυναφθεί στο τέλος της συμβολοσειράς, η οποία μεταβιβάστηκε στο εκπαιδευτικό πρόγραμμα μεταβλητής μέλους.
Περίληψη:
Εάν υπάρχει μια απαίτηση που δεν ικανοποιείται από κανένα από τα φίλτρα που ορίζονται σε γωνιακή, τότε μπορείτε να δημιουργήσετε το προσαρμοσμένο φίλτρο σας και να προσθέσετε τον προσαρμοσμένο κωδικό σας για να προσδιορίσετε τον τύπο εξόδου που θέλετε από το φίλτρο.