AngularJS – Własne filtry

bugajsky.pl 6 lat temu

Omówię dziś tworzenie własnych filtrów. Technika ta przydatna jest zwłaszcza przy większych projektach, kiedy to nie wystarczają już podstawowe, wbudowane w framework filtry. W poprzednim wpisie opisałem korzystanie z podstawowych filtrów wbudowanych w framework – AngularJS – Podstawowe filtry. Jak wiemy z tamtego wpisu, filtry służą jedynie do modyfikowania wyświetlanej treści, a nie zawartości danych. Tak też będzie w przypadku tworzonych przez nas filtrów. Będą zmieniać wyświetlane wartości bez zmian w strukturze danych.

Trochę teorii

Filtry można podzielić na 3 typy:

Filtry wartości,
Filtry tablic,
Filtry wykorzystujące inne filtry.

Filtr wartości

Pokażę, w jaki sposób można stworzyć każdy z rodzajów filtrów, zaczynając od najprostszego, czyli filtru wartości.

Zadaniem filtra będzie dodanie do filtrowanej wartości ilość znaków jaką zawiera oraz jeżeli parametr jest ustawiony na wartość true, to wtedy zostanie dodany dodatkowy tekst ilość znaków wynosi:.

W ten sposób wartość Bugajsky, zostanie wyświetlona w aplikacji Bugajsky – 8 lub jeżeli parametr jest ustawiony, wtedy Bugajsky – ilość znaków wynosi: 8.

Ten prosty przykład pokazuje, w jaki sposób, stworzyć prosty filtr oraz jak obsługiwać przekazywane parametry.

app.filter('valueLength', function () { return function (value, param) { if (angular.isString(value)) { if (param) { return value + ' - ilość znaków wynosi: ' + value.length; } else { return value + ' - ' + value.length; } } else { return value; } } });

Wykorzystujemy metodę filter do utworzenia nowego filtru. Jako pierwszy argument przyjmuje nazwę nowego elementu, zaś drugi to funkcja, która zwraca funkcję wykonującą określone zadania. Zwracana funkcja przyjmuje dwa argumenty: value i param. Value to nic innego jak wartość przeznaczona do filtrowania, a param to pierwszy przekazany parametr. Parametrów może być więcej, np. można by dodać jeszcze parametr nr, który odpowiadałby za usunięcie wybranej litery z przekazanego ciągu znaków. Na początku filtr sprawdza jaką wartość dostał, jeżeli nie jest to string funkcja zwraca otrzymaną wartość. Do sprawdzenia przekazanej wartości wykorzystujemy Angularową metodę isString(). Następną czynnością jest sprawdzenie przekazanego parametru, jeżeli wartość jest równa true, wtedy zwracany jest ciąg znaków ilość znaków wynosi: oraz długość filtrowanej wartości.

Teraz pozostaje nam wykorzystanie utworzonego filtru w kodzie html.

<p>{{$ctrl.filtr | valueLength}}</p> <p>{{$ctrl.filtr | valueLength: true}}</p>

Jak widzimy, w prosty sposób utworzyliśmy nasz pierwszy filtr, którego zadaniem było dodanie ilości znaków w przekazanej wartości oraz tekstu, który jest opcjonalny, uzależniony od parametru.

Filtr tablic

Teraz zajmiemy się filtrowaniem tablic danych. Zadanie filtru będzie takie samo jak w poprzednim przykładzie, z różnicą taką, iż teraz przekazywaną daną do filtrowania nie będzie string, a tablica stringów.

app.filter('arrayLength', function () { return function (array, param) { if (angular.isArray(array)) { var data = []; if (param) { for (var i = 0; i < array.length; i++) { data.push(array[i] + ' - ilość znaków wynosi: ' + array[i].length); } } else { for (var i = 0; i < array.length; i++) { data.push(array[i] + ' - ' + array[i].length); } } return data; } else { return array; } } });

Zatem nadajemy nazwę nowemu filtrowi, tworzymy funkcję w podobny sposób jak wcześniej. Pierwszym krokiem filtra jest sprawdzenie czy przekazane dane to tablica, do tego celu znów korzystamy z Angularowej metody isArray(). Następnie tworzona jest nowa zmienna tablicowa, która będzie przechowywać przefiltrowane dane. Kolejnym krokiem jaki wykonuje filtr jest sprawdzenie jaka wartość została przekazana przez parametr param. jeżeli jest ustawiony na true, to do ilości znaków zostanie dodany tekst: ilość znaków wynosi:. W przeciwnym wypadku do wartości zostanie dodana jedynie liczba znaków w ciągu. Dodawanie danych do data odbywa się poprzez wykorzystanie pętli iterującej po przekazanej tablicy array.

Po utworzeniu filtra, musimy jeszcze wykorzystać go w pliku html.

Filtry wykorzystujące inne filtry

Tym razem zajmiemy się stworzeniem własnego filtra, który w swoim ciele wykorzystuje już istniejące filtry. Zadaniem utworzonego filtru będzie dodanie ilości znaków w danym ciągu oraz ograniczenie rekordów dzięki filtru limitTo.

app.filter('arrayLengthLimit', function ($filter) { return function (array, param, limit) { if (angular.isArray(array)) { var data = $filter('limitTo')(array, limit); return $filter('arrayLength')(data, param); } else { return array; } } });

Zatem w funkcji wykonującej podajemy 3 argumenty: array, param, limit. Na początek sprawdzamy czy przekazany pierwszy argument jest tablicą, w podobny sposób jak miało to miejsce przy poprzednim filtrze. Następnie tworzymy zmienną data, która otrzymuje przefiltrowane dane z użyciem filtru limitTo i parametru limit. Następnie zostanie zwrócona wartość przez funkcję po wcześniejszym przefiltrowaniu przez filtr arrayLength (napisany przez nas wcześniej filtr) z przekazaną zmienną data oraz parametrem param.

Dzięki takiemu zabiegowi tworząc nowy filtr – arrayLengthLimit nie musimy powtarzać wcześniej napisanego kodu w arrayLength.

Mając już gotowy kod pozostaje dodać filtr do danych w pliku root-app.html

Kolejne parametry podajemy oddzielając je dwukropkiem.

Przykładowa aplikacja

Aplikacja składa się z dwóch plików: index.html oraz root-app.html. Komponent root-app zawiera w sobie wszystkie napisane przez nas filtry.

Plik index.html

<!DOCTYPE html> <html lang="pl" ng-app="app"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>AngularJS #12</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> .panel-default { margin-top: 2em; padding: 1em; } </style> </head> <body> <div> <div> <root-app></root-app> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.js" integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> <script> var app = angular.module("app", []); app.component('rootApp', { templateUrl: 'root-app.html', controller: rootAppController }); app.filter('valueLength', function () { return function (value, param) { if (angular.isString(value)) { if (param) { return value + ' - ilość znaków wynosi: ' + value.length; } else { return value + ' - ' + value.length; } } else { return value; } } }); app.filter('arrayLength', function () { return function (array, param) { if (angular.isArray(array)) { var data = []; if (param) { for (var i = 0; i < array.length; i++) { data.push(array[i] + ' - ilość znaków wynosi: ' + array[i].length); } } else { for (var i = 0; i < array.length; i++) { data.push(array[i] + ' - ' + array[i].length); } } return data; } else { return array; } } }); app.filter('arrayLengthLimit', function ($filter) { return function (array, param, limit) { if (angular.isArray(array)) { var data = $filter('limitTo')(array, limit); return $filter('arrayLength')(data, param); } else { return array; } } }); function rootAppController() { var ctrl = this; ctrl.title = 'AngularJS - Create filtrs'; ctrl.filtr = 'Bugajsky'; ctrl.array = ['Bugajsky', 'Blog']; } </script> </body> </html>

Plik root-app.html

<h1>{{$ctrl.title}}</h1> <h2>Value</h2> <p>{{$ctrl.filtr | valueLength}}</p> <p>{{$ctrl.filtr | valueLength: true}}</p> <h2>Array</h2> <p ng-repeat="data in $ctrl.array | arrayLength">{{data}}</p> <p ng-repeat="data in $ctrl.array | arrayLength: true">{{data}}</p> <h2>Filter with filters</h2> <p ng-repeat="data in $ctrl.array | arrayLengthLimit:false:1">{{data}}</p> <p ng-repeat="data in $ctrl.array | arrayLengthLimit:true:1">{{data}}</p>

Efekt działania aplikacji

Podsumowanie

Wpis ten pokazał, w jaki sposób tworzyć własne filtry, tak aby zmieniać sposób prezentacji danych bez ich modyfikowania. W niewielkich projektach wystarczają podstawowe filtry, które zostały przygotowane przez twórców frameworka AngularJS. Jednak sytuacja zmienia się, gdy mamy przed sobą większy projekt. Wtedy przydaje się widza, która została przedstawiona w tym wpisie. Najprostsze w tworzeniu są filtry operujące na stringach. Trudniejsze wydają się filtry wykorzystywane do obsługi tablic, jednak po przerobieniu kilku przykładów, również i tworzenie takich filtrów zaczyna sprawiać przyjemność. Warto również pamiętać o możliwości tworzenia filtrów wykorzystujących w swoim ciele inne filtry, dzięki czemu pozbywamy się powtarzającego się kodu.

Idź do oryginalnego materiału