Kurs AngularJS #8 – Filtry

Filtry to coś nowego czym zajmiemy się tym razem. Są one odpowiedzialne za odpowiednie formatowanie danych które zostaną wyświetlone użytkownikowi. Możemy ich używać w widokach, kontrolerach czy też naszych usługach.

Zacznijmy więc może od tego jak używa się ich w widokach co pewnie będzie najczęściej stosowanym przez Ciebie, przynajmniej na razie, sposobem. Żeby odpowiednio sformatować jakieś dane przez filtr musimy skorzystać z następującej składni:

Przykładowym filtrem jest currency który dba o to, żeby podana liczba była wyświetlana jako jakaś ilość pieniędzy. Zawsze dodaje znak waluty i utrzymuje dwa miejsca po przecinku. Zastosowanie jej w taki sposób:

Da nam w rezultacie $12.00.

Filtry mogą być również używane na wynikach dawanych przez inne filtry i mamy wtedy do czynienia z wywołaniem łańcuchowym.

Mogą mieć również argumenty:

W widokach filtry wykonywane są jedynie w przypadku kiedy wartość którą filtrują ulegnie zmianie. Jest to znacznie bardziej optymalne rozwiązanie niż stosowanie ich za każdym wywołaniem $digest. Są jednak dwa odstępstwa od reguły:

  1. Przeważnie filtrów używa się jedynie na jakichś prostych typach danych. Jednak filtry które otrzymują obiekt są wykonywane z każdym $digest, gdyż zbyt kosztownym byłoby śledzenie czy dane wejściowe rzeczywiście zostały zmienione
  2. Filtry oznaczone jako $stateful również wykonywane są z każdym $digest. Więcej o tego rodzaju filtrach dowiesz się w dalszej części tego artykułu.

Filtrów możemy używać również w kontrolerach. Różni się to tym, że używamy ich wtedy, kiedy konkretnie chcemy. Nie są wykonywane za każdym razem kiedy jakieś wartości ulegną zmianie czy przy każdym cyklu życia zakresu w przypadku tablic i obiektów.

Wyobraź sobie, że masz tablicę z obiektami swoich pracowników i każdy z nich oczywiście ma imię. Potrzebujesz jednak wyświetlić tylko tych których imiona zawierają literę “a”. Nic nie będzie się zmieniać więc bez sensu byłoby tu użycie filtra w widoku, gdyż musiałby być wykonywany za każdym razem z racji, że jest to tablica z obiektami – powodowałby niepotrzebne obciążenie. Najsensowniejszym więc rozwiązaniem jest tutaj stosowanie filtra w kontrolerze tylko raz.

Jak widzisz, żeby użyć filtra musimy podać go jako zależność w kontrolerze. Konwencja podawania nazwa filtrów jest taka: nazwaFilter. W tym przypadku w widoku użylibyśmy filtra w następujący sposób:

Korzystamy więc z filtra o nazwie filter i taki też zaciągamy do kontrolera: filterFilter. Zawsze jako pierwszy argument podajemy wartość która ma zostać przefiltrowana a jako drugi warunek na którym ma to zostać zrobione.

Tworzenie własnych filtrów

Własne filtry tworzy się bardzo prosto. Podobno jak w przypadku kontrolerów, dyrektyw czy komponentów istnieje metoda wykonywana na naszym module która pozwala nam bardzo szybko zarejestrować taki filtr. Podajemy oczywiście jego nazwę i funkcję która musi również zwracać funkcję. Ta zwracana funkcja jako pierwszy argument przyjmuje wartość poddawaną filtrowania, reszta argumentów to tylko dodatkowe opcje.

Pamiętaj, że filtr który tworzysz za każdym razem kiedy podamy mu taką samą wartość powinien zwracać ten sam wynik – nie może na niego wpływać nic z zewnętrznego środowiska. Nasz pierwszy filtr będzie odpowiedzialny za ustawianie co drugiej litery na wielką. To czy zaczynamy od pierwszego znaku, czy od drugiego definiował będzie dodatkowy argument.

Jak widzisz wszystko działa dokładnie tak jak to przed chwilą opisałem. Możesz w ten sposób stworzyć dowolnie działający filtr, który przetwarza i  wyświetla dane tak jak tego akurat potrzebujesz.