Czasami filtry wbudowane w Angular nie mogą spełnić potrzeb lub wymagań dotyczących filtrowania danych wyjściowych. W takim przypadku można utworzyć niestandardowy filtr, który przepuszcza dane wyjściowe w wymagany sposób.
Jak utworzyć filtr niestandardowy
W poniższym przykładzie przekażemy ciąg do widoku ze sterownika za pośrednictwem obiektu scope, ale nie chcemy, aby ciąg był wyświetlany tak, jak jest.
Chcemy mieć pewność, że za każdym razem, gdy wyświetlamy ciąg, przekazujemy niestandardowy filtr, który dołączy kolejny ciąg i wyświetli ukończony ciąg użytkownikowi.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | Demofilter}}
Objaśnienie kodu:
- Tutaj przekazujemy ciąg „Angular” w zmiennej składowej o nazwie tutorial i dołączamy go do obiektu zasięgu.
- Angular zapewnia usługę filtrowania, której można użyć do stworzenia naszego niestandardowego filtru. „Demofilter” to nazwa nadana naszemu filtrowi.
- Jest to standardowy sposób definiowania niestandardowego filtru, w którym zwracana jest funkcja. Ta funkcja zawiera niestandardowy kod służący do tworzenia niestandardowego filtru. W naszej funkcji bierzemy ciąg znaków „Angular”, który jest przekazywany z naszego widoku do filtra i dołączamy do niego ciąg „Tutorial”.
- Używamy naszego Demofiltra na naszej zmiennej składowej, która została przekazana z kontrolera do widoku.
Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Z wyjścia,
- Widać, że został zastosowany nasz niestandardowy filtr i
- Słowo „Tutorial” zostało dodane na końcu ciągu, który został przekazany w tutorialu dotyczącym zmiennej składowej.
Podsumowanie:
Jeśli istnieje wymóg, który nie jest spełniony przez żaden z filtrów zdefiniowanych w trybie kątowym, możesz utworzyć niestandardowy filtr i dodać własny kod, aby określić typ wyniku, jaki chcesz uzyskać z filtru. A