Użycie filtrów w widoku

Transkrypt

1 Filtry w Angularze są bardzo przydatnym narzędziem. Pomagają formatować dane i są wygodnym sposobem na reużywalność kodu. Tworząc aplikację w AngularJS mamy dostępnych wiele gotowych filtrów. Jeżeli nie spełnią one naszych oczekiwań, możliwe jest dopisanie swoich. Ich główną zaletą w stosunku do zwykłych funkcji jest to, że możemy ich używać zarówno po stronie kontrolerów jak i w widokach. Sprytne operowanie filtrami potrafi znacznie skrócić kod aplikacji. Użycie filtrów w widoku Używanie wbudowanych filtrów jest bardzo proste. Filtr możemy dokleić do dowolnego wyrażenia, oraz niektórych dyrektyw. Przykładowe użycie wygląda następująco: h {{ wyrażenie <nazwa_filtru> Po wywołaniu powyższego kodu podczas wywołania wyrażenia zostanie dla niego zastosowany filtr. Filtry łączymy za pomocą operatora pionowej kreski (tzw. pipe). Filtry możemy ze sobą łączyć, są one wywoływane w kolejności od lewej do prawej: {{ wyrażenie <filtr> <filtr> <filtr> Co ciekawe, niektóre filtry mogą przyjmować argumenty. Przekazujemy je do filtra po dwukropku. {{ wyrażenie <filtr> <filtr>:<arg> <filtr>:<arg>:<arg> Lista dostępnych filtrów Dla wygody programista AngularJS udostępnia wiele wbudowanych filtrów. Oto ich lista: Filter currency date filter json limitto lowercase number orderby uppercase Opis Formatuje liczby do postaci waluty Formatuje datę według wzorca Filtruje elementy kolekcję Wyświetla obiekt jako tekst JSON Przycina tablice lub tekst do określonej długości Zamienia tekst na małe litery Formatuje liczbę według wzorca Sortuje po określonym parametrze Zamienia tekst na duże litery Karol Trybulec p-programowanie.pl

2 Przykład użycia currency Currency jest bardzo wygodnym filtrem do formatowania walut. Jako jeden z wielu filtrów korzysta z tzw. locale z biblioteki in. Jeżeli dołączymy odpowiedni plik locale do projektu (np. z konfiguracją polską) wtedy domyślną walutą filtra będzie polski Złoty. Jeżeli nie dołączymy ustawień lokalizacji domyślną walutą będzie amerykański Dolar. Oto przykładowy kod: function simplecontroller($scope) { $scope.kwota = 00.; <p>{{kwota currency</p> <p>{{kwota currency:'pln'</p> <p>{{kwota currency:'' zł</p> <p>{{ currency:'' zł Efekt działania jest następujący: Zauważ jaka duża jest różnorodność osiągniętych wyników. W pierwszym przypadku wykorzystane zostały ustawienia domyślne. W drugim przypadku zmieniliśmy symbol waluty przekazując wprost parametr PLN. Domyślnie znak dolara wyświetlany jest przed kwotą. Chcąc wyświetlić polską walutę zł za liczbą, możemy posłużyć się sztuczką. Przekazujemy pusty parametr waluty a interesującą nas walutę dopisujemy bezpośrednio poza wyrażeniem. Innym lepszym rozwiązaniem byłoby dołączenie odpowiedniej konfiguracji biblioteki in przeznaczonej dla Polski. Karol Trybulec p-programowanie.pl

3 Przykład użycia filter Filter o nazwie filter służy do odfiltrowywania elementów kolekcji o określonych parametrach. Łączymy go z dyrektywą ng-repeat. Ma naprawdę sporo możliwości. Z jego pomocą łatwo można zrobić Angularową wyszukiwarkę. Oto przykładowy kod: 0 function simplecontroller($scope) { $scope.pracownicy = [ {id:, imie: "Karol", wiek:, {id:, imie: "Kaja", wiek:, {id:, imie: "Tomek", wiek:, {id:, imie: "Justyna", wiek:, {id:, imie: "Kazek", wiek: ] <p>szukaj: <input type="text" ng-model="szukaj"></p> <table> <tr ng-repeat="pracownik in pracownicy filter : szukaj track by pracownik.id"> <td>{{pracownik.imie<td> <td>{{pracownik.wiek lat</td> </tr> </table> Wynik działania jest następujący: Karol Trybulec p-programowanie.pl

4 Pole wyszukiwania zbindowane jest bezpośrednio ze zmienną szukaj. Jej deklaracja nie była potrzebna w $scope ponieważ odbędzie się automatycznie. Do dyrektywy ng-repeat został natomiast dołączony filter. Filtruje on wartości właśnie po zmiennej szukaj. Zwróć uwagę, ponieważ filtry wykonują się od lewej do prawej dlatego track by musiał zostać dołączony za filtrem, aby indeksować elementy przefiltrowane a nie te, które filtr wytnie. Filtrowanie odbywa się po wszystkich atrybutach obiektów kolekcji pracownicy. Z tego powodu wpisanie wartości wyświetliło nam Kazimierza, który nie ma lat ma natomiast atrybut id z taką wartością. Możemy filtrować kolekcję tylko po jednej wartości przesyłając do filter obiekt z nazwą atrybutu: <tr ng-repeat="pracownik in pracownicy filter : {imie: szukaj track by pracownik.id"> <td>{{pracownik.imie<td> <td>{{pracownik.wiek lat</td> </tr> Takie ustawienie spowoduje, że wyszukiwane będą tylko elementy, których atrybut imie dopasowuje się do zmiennej szukaj. Przykład użycia json Za pomocą filtra json możemy w bardzo prosty sposób wyświetlić dowolny obiekt JavaScript podpięty do naszego $scope. Przykładowy kod: function simplecontroller($scope) { $scope.osoba = { imie: "Karol", wiek:, ulubionepiosenki: ['aaa', 'bbb', 'ccc'] <pre>{{osoba json</pre> Karol Trybulec p-programowanie.pl

5 Efekt działania: Przykład użycia orderby Filter orderby jest niezwykle pomocnym filtrem, używanym do budowania zaawansowanych list. Możemy zastosować go do dyrektywy ng-repeat i bardzo dobrze łączy się z on z filter filter. Używając go możemy ustalić po jakim atrybucie przefiltrować kolekcję: 0 0 function simplecontroller($scope) { $scope.atrybutsortowania = 'id'; $scope.osoby = [ {id:, imie: "Karol", wiek:, {id:, imie: "Zenon", wiek:, {id:, imie: "Maciej", wiek:, {id:, imie: "Beata", wiek: ]; $scope.sortuj = function(atrybut) { $scope.atrybutsortowania = atrybut; <table> <tr> <th ng-click="sortuj('id')">id</th> <th ng-click="sortuj('imie')">imie</th> <th ng-click="sortuj('wiek')">wiek</th> </tr> <tr ng-repeat="osoba in osoby orderby: atrybutsortowania track by osoba.id"> <td>{{osoba.id</td> <td>{{osoba.imie</td> <td>{{osoba.wiek</td> </tr> </table> Karol Trybulec p-programowanie.pl

6 Efekt działania: Kod jest rozbudowany, ale bardzo prosty. Filter orderby przyjmuje jako parametr nazwę atrybutu kolekcji, po której ma sortować. Jeżeli parametr nie zostanie przekazany jako string wtedy szuka on funkcji lub zmiennej podpiętej do $scope o takiej nazwie. W naszym przypadku dodana została funkcja, ustawiająca parametr sortujący na właściwą wartość. Sortowanie odbywa się po parametrze sortującym. Łącząc filtr orderby z filter filter można uzyskać zaawansowaną tabelkę z możliwością sortowania kolumn i dynamicznego wyszukiwania. Dokładając do nich filter limitto można stworzyć paginację wartości np. po 0 elementów w tabelce na stronę. Użycie filtrów w kontrolerze Filtrów Angularowych można użyć także w kodzie kontrolera aplikacji. W tym celu należy skorzystać z serwisu o nazwie $filter. Zwraca on instancję filtra o nazwie przekazanej jako argument. Aby móc użyć serwisu należy wstrzyknąć go jako zależność do kontrolera. Przykładowy kod wygląda następująco: 0 function simplecontroller($scope, $filter) { var kwota =.0; $scope.kwotaformatowana = $filter('currency')(kwota); $scope.kwotaformatowana = $filter('currency')(kwota, ''); <p>{{kwotaformatowana</p> <p>{{kwotaformatowana zł</p> Karol Trybulec p-programowanie.pl

7 Efekt działania: Oprócz wykorzystania filtru, mamy możliwość przesyłana do niego parametrów co widać w przykładzie wyżej. Wyczyszczony został domyślny symbol waluty a następnie ręcznie w widoku dopisana waluta zł. Własne filtry Platforma AngularJS pozwala na pisanie własnych filtrów. Nie jest problemem napisanie własnej funkcji, która filtruje tablicę po określonej wartości atrybutu, jednak dzięki wprowadzeniu filtrów kod aplikacji Angular jest uporządkowany. Filtry znajdują się w filtrach, kontrolery w kontrolerach a komponenty w komponentach. Z tego powodu zachęcam Cię, do trzymania funkcji odpowiedzialnych za filtrowanie tablic właśnie w postaci filtrów. Aby utworzyć własny filter należy skorzystać z funkcji konstruującej wywołanej na instancji modułu. Przykładowo: app.filter('mojfilter', function() { //cialo filtra ); Tak samo jak w przypadku kontrolerów, możemy stworzyć filter jako funkcję anonimową lub normalną: app.filter('mojfilter', function() { //anonimowy ); app.filter('mojfilter'); function mojfilter() { //normalny Karol Trybulec p-programowanie.pl

8 Przykładowy własny filter Stwórzmy własny filter Angularowy wyświetlający tylko ludzi wysokich. Ważną cechą filtra musi być jego skalowalność, a więc możliwość dynamicznej edycji wzrostu progowego. Kodem początkowym niech będzie następujący prosty kod: 0 function simplecontroller($scope, $filter) { $scope.osoby = [ {id:, imie: "Karol", wzrost:, {id:, imie: "Arek", wzrost:, {id:, imie: "Natalia", wzrost:, {id:, imie: "Przemek", wzrost:, ]; <table> <tr ng-repeat="osoba in osoby track by osoba.id"> <td>{{osoba.imie</td> <td>{{osoba.wzrostcm</td> </tr> </table> Aby dodać filter należy: zdefiniować nazwę filtra poprzez funkcję konstruującą <moduł>.filter(<nazwa_filtra>). podpiąć do filtra funkcję filtra, która zwróci anonimową funckję filtrującą anonimowa metoda filtra powinna przyjmować parametry kolekcji wejściowej oraz kryterium filtrowania anonimowa metoda filtra powinna zwrócić przefiltrowaną tablicę wyników Metoda filtra może w naszym wypadku wyglądać następująco: Karol Trybulec p-programowanie.pl

9 function wysocyludziefilter() { return function(input, wzrostprogowy) { var przefiltrowane = []; ; //jezeli ktos nie podał parametru to przyjmij cm if (typeof wzrostprogowy === "undefined") { wzrostprogowy = ; for (var i = 0; i<input.length; i++) { if (input[i].wzrost >= wzrostprogowy) { //jeżeli spełnia warunek wzrostu przefiltrowane.push(input[i]) //to dodaj do nowej tablicy return przefiltrowane; //zwróć nową tablicę Pierwszym parametrem input jest kolekcja wejściowa, zostanie ona przesłana do filtra automatycznie. Kolejne argumenty to dodatkowe parametry filtra, które możemy zdefiniować. W powyższym kodzie jest to wzrostprogowy powyżej którego człowiek jest uznawany za wysokiego. Jeżeli nie zostanie on przekazany do filtra, wtedy przyjmijmy że jego wartość wynosi. Po podpięciu funkcji do instancji filtra należy zastosować go w dyrektywie ng-repeat: Karol Trybulec p-programowanie.pl

10 0 0 0 app.filter('wysocyludziefilter', wysocyludziefilter); function simplecontroller($scope, $filter) { $scope.wzrostmin = ; $scope.osoby = [ {id:, imie: "Karol", wzrost:, {id:, imie: "Arek", wzrost:, {id:, imie: "Natalia", wzrost:, {id:, imie: "Przemek", wzrost:, ]; function wysocyludziefilter() { return function(input, wzrostprogowy) { var przefiltrowane = []; ; //jezeli ktos nie podał parametru to przyjmij cm if (typeof wzrostprogowy === "undefined") { wzrostprogowy = ; for (var i = 0; i<input.length; i++) { if (input[i].wzrost >= wzrostprogowy) { //jeżeli spełnia warunek wzrostu przefiltrowane.push(input[i]) //to dodaj do nowej tablicy return przefiltrowane; //zwróć nową tablicę <input type="number" ng-model="wzrostmin" /> <br><br> <table> <tr ng-repeat="osoba in osoby wysocyludziefilter:wzrostmin track by osoba.id"> <td>{{osoba.imie</td> <td>{{osoba.wzrostcm</td> </tr> </table> Efekt działania: Karol Trybulec p-programowanie.pl

11 Karol Trybulec p-programowanie.pl