Dziś ostatnia część z serii wpisów o stosowaniu filtrów w angularze. W poprzednich postach pokazałem jak korzystać z domyślnych filtrów angulara i jak przekazywać im zdefiniowane przez programistę funkcje. Tym razem opiszę tworzenie własnych filtrów.
Korzystanie z wbudowanych we framework filtrów daje nam już bardzo duże możliwości. Czasem jednak, nie dostarczają programiście takich funkcji jakich potrzebuje. W takiej sytuacji angular daje możliwość zdefiniowania od podstaw własnego filtra.
Tworzenie własnych filtrów nie jest niczym skomplikowanym. Trzeba jedynie pamiętać o paru podstawowych zasadach. Możemy stworzyć zarówno filtr oddziałujący na poszczególne elementy, jak i na całe kolekcje. Przedstawię oba te scenariusze. Wszystko, jak zawsze, będzie ilustrowane przykładami. Podstawą przy której będę pracował jest ta sama strona co w poprzednich wpisach.
Tworzenie własnych filtrów w AngularJS – pojedyncze elementy
Utworzę filtr, który zmodyfikuje sposób wyświetlania elementów w kolumnie level. Do liczby poziomów zostanie dodane słówko ‚lvl’. Tak wygląda efekt. Dodałem też filtr orderBy, sortujący po kolumnie level, tak jakby wciąż zawierała tylko liczby. Oto jak wygląda cały kod JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var filtryApp = angular.module('filtryApp', []); var model = heroes; filtryApp.controller('filtryController', function($scope){ $scope.heroes = model; }); //tu zaczynam deklarowac filtr filtryApp.filter("addLvl", function(){ return function(value, before) { if(!before){ value += " lvl"; } else { value = "lvl " + value; } return value; }; }); |
Aby zdefiniować własny filtr, używam metody filter modułu. Przyjmuje ona dwa argumenty. Pierwszy to ciąg znaków, który będzie nazwą filtra, drugi to funkcja, która zwraca funkcję obsługującą filtrowanie.
To ta zwracana funkcja jest najważniejsza. Przyjmuje ona zawsze przynajmniej jeden argument (w tym wypadku to value). Jest to wartość, która zostanie przefiltrowana. Kolejne argumenty będą przyjmowane przy deklaracji filtra w widoku. Ja dodałem jeden dodatkowy argument before.
Jeżeli before nie jest zdefiniowane, na koniec wartości dodawany jest łańcuch znaków ” lvl”. To właśnie ten efekt, widać na przykładowej stronie. Jeżeli before równa się true łańcuch znaków umieszczany jest przed wartością. Na koniec wartość jest zwracana. To co zostaje zwrócone, wyświetlane jest następnie w widoku. I tak filtr, stosuje tę funkcję dla każdego elementu w zbiorze.
Aby wyświetlić efekty filtra w widoku, dodaje go to odpowiedniej kolumny:
|
1 |
<td>{{hero.level | addLvl}}</td> |
I gotowe 🙂 Aby skorzystać z argumentu before, przekazuje wartość, po dwukropku, tak jak we wbudowanych filtrach:
|
1 |
<td>{{hero.level | addLvl:true}}</td> |
W ten sposób można dodawać więcej argumentów i wykorzystywać je w zdefiniowanych przez siebie filtrach.
Tworzenie własnych filtrów w AngularJS – kolekcje
W drugim przykładzie stworzę filtr, który operuje na całej kolekcji. W moim wypadku będzie to ta sama, tablica z danymi, której używałem dotychczas. Mój filtr, będzie ograniczał ilość wyświetlanych elementów. Do tego, będzie pokazywał tylko elementy od elementu o określonym indeksie.
Dodam do takiego filtra trochę dodatkowego kodu i uzyskam dane, które są ‚stronnicowane’. Oto jak wygląda strona wynikowa. Wystarczy kliknąć na odpowiedni ‚przycisk’ pod tabelką aby wyświetlić inną ‚stronę’ z danymi.
A tak wygląda kod filtru:
|
1 2 3 4 5 6 7 |
filtryApp.filter("viewPage", function($filter){ return function(collection, page, numPerPage) { var view = page*numPerPage collection = collection.slice(view) return $filter("limitTo")(collection, numPerPage); } }); |
Jak widać, filtr ten oprócz kolekcji, przyjmuje dwa dodatkowe argumenty. Pierwszy to numer strony, a drugi to ilość elementów wyświetlanych na stronie.
Na początku obliczany jest indeks elementu, od którego wyświetlane będą elementy. Wystarczy pomnożyć aktualną stronę (będą liczone od zera), przez ilość elementów na stronie.
Następnie przy pomocy metody tablicowej splice wywalam, wszystkie elementy przed obliczonym indeksem.
Tak przygotowana tablicę przepuszczam jeszcze przez filtr LimitTo i zwracam. Aby to zrobić korzystam z seriwsu $filter. W tym poście nie będę wchodził w szczegóły działania serwisu. Ważne jest aby zrozumieć, że zwracana kolekcja została została ograniczona do pierwszych paru elementów. Ich liczba równa jest argumentowi numPerPage.
Teraz muszę dodać nowo utworzony filtr do widoku:
|
1 |
<tr data-ng-repeat="hero in heroes | orderBy:'level' | viewPage:pageNum:5"> |
Jak widać filtruje już tabelę przy użyciu filtru orderBy. Drugi filtr, to właśnie stworzony przeze mnie viewPage. Pierwszy argument czyli numer strony, podany jest poprzez zmienną pageNum. Zmienną tę definiuje w $scope i początkowo jej wartość wynosi zero. Drugi argument to liczba elementów na stronę, w tym wypadku pięć. Warto zauważyć, że filtrowana wartość nie jest podawana w argumentach widoku, tak jak przy filtrach dla pojedynczych wartości.
Teraz jeszcze tylko dodam sposób na zmianę strony w widoku. Użyje do tego dwóch paragrafów. Po kliknięciu, zmienią one wartość pageNum. Tak wygląda to w kodzie:
|
1 2 |
<p class ="pagePicker" data-ng-click="prevPage()"> Prev Page </p> <p class ="pagePicker" data-ng-click="nextPage()"> Next Page </p> |
A tak wygląda kod funkcji, które są wywoływane przez kliknięcie w te elementy:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$scope.nextPage = function(){ $scope.pageNum++; if($scope.pageNum>3){ $scope.pageNum = 3; } }; $scope.prevPage = function(){ $scope.pageNum--; if($scope.pageNum<0){ $scope.pageNum = 0; } }; |
Nic skomplikowanego :). Zmieniają one jedynie wartość pageNum, pilnując aby nie zostały przekroczone określone granice.
I to wszystko. Tak jak mówiłem, w bardzo prosty sposób, można stworzyć dość skomplikowane zachowanie w naszej aplikacji.
Oczywiście, są to tylko proste przykłady ilustrujące mechanizm frameworka. Na pewno dałoby się je usprawnić, ale chodziło mi głównie o przedstawienie możliwości jakie dają programiście tworzenie własnych filtrów.
To ostatni wpis z serii opisującej filtry w AngularJS. Następnie wpisy o Angularze traktować będą o innych aspektach programowania przy użyciu tego frameworka. Jeśli chcesz być pewny, że żaden z tych wpisów nie umknie twojej uwadze, zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o nowościach na blogu.