A volte i filtri incorporati in Angular non possono soddisfare le esigenze oi requisiti per il filtraggio dell'output. In tal caso è possibile creare un filtro personalizzato che può passare l'output nel modo richiesto.
Come creare un filtro personalizzato
Nell'esempio seguente passeremo una stringa alla vista dal controller tramite l'oggetto scope, ma non vogliamo che la stringa venga visualizzata così com'è.
Vogliamo assicurarci che ogni volta che visualizziamo la stringa, passiamo un filtro personalizzato che aggiungerà un'altra stringa e mostrerà la stringa completata all'utente.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | Demofilter}}
Spiegazione del codice:
- Qui stiamo passando una stringa "Angular" in una variabile membro chiamata tutorial e allegandola all'oggetto scope.
- Angular fornisce il servizio di filtro che può essere utilizzato per creare il nostro filtro personalizzato. Il "Demofilter" è un nome dato al nostro filtro.
- Questo è il modo standard in cui viene definito un filtro personalizzato in cui viene restituita una funzione. Questa funzione è ciò che contiene il codice personalizzato per creare il filtro personalizzato. Nella nostra funzione, stiamo prendendo una stringa "Angular" che viene passata dalla nostra vista al filtro e aggiungendo la stringa "Tutorial" a questa.
- Stiamo usando il nostro Demofilter sulla nostra variabile membro che è stata passata dal controller alla vista.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'uscita,
- Si può vedere che il nostro filtro personalizzato è stato applicato e
- La parola "Tutorial" è stata aggiunta alla fine della stringa, che è stata passata nel tutorial della variabile membro.
Sommario:
Se c'è un requisito che non è soddisfatto da nessuno dei filtri definiti in angular, puoi creare il tuo filtro personalizzato e aggiungere il tuo codice personalizzato per determinare il tipo di output che desideri dal filtro.