W dzisiejszym poście opiszę jak działają filtry w AngularJS. Są one kolejnym bardzo przydatnym mechanizmem w tym frameworku. Możliwość filtrowania danych jest wręcz niezbędna w każdej aplikacji, która obsługuje dużą ilość informacji. Na szczęście w Angularze jest to bardzo proste. Używając przykładów, dokładnie zademonstruje działanie narzędzi do filtrowania i sortowania.
W Angularze wbudowane jest kilka rodzajów filtrów. Ja skupię się na dwóch: filter oraz orderBy. Pierwszy służy do pokazywania danych, które spełniają zdefiniowany warunek a drugi do sortowania danych rosnąco lub malejąco.
Na początek potrzebne będą jakieś dane. W tym celu stworzyłem plik data.js. Znajduje się on w głównym folderze projektu. Treść pliku wygląda tak. Jest to tablica pełna obiektów, które przechowują różne informacje. A tak wygląda strona, w której wyświetlam te informacje z pomocą angulara. Póki co nie dzieje się tu nic nowego. Tak wygląda kod tej strony:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html data-ng-app="filtryApp"> <head> <meta charset="utf-8"> <title>Angular Filtry - js.N00b jsdn.pl</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <style> table { width: 450px !important; float: left; } </style> <script type="text/javascript" src='data.js'></script> <script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js'></script> <script> var filtryApp = angular.module('filtryApp', []); var model = heroes; filtryApp.controller('filtryController', function($scope){ $scope.heroes = model; }); </script> </head> <body data-ng-controller="filtryController"> <table class="table table-striped table-hover"> <thead> <tr> <th>Name</th> <th>Class</th> <th>Race</th> <th>Level</th> </tr> </thead> <tbody> <tr data-ng-repeat="hero in heroes"> <td>{{hero.name}}</td> <td>{{hero.class}}</td> <td>{{hero.race}}</td> <td>{{hero.level}}</td> </tr> </tbody> </table> </body> </html> |
To będzie baza, na której stworzę przykładową część aplikacji. W tym momencie czytanie wyświetlanych danych jest trudne. Są one rozłożone chaotycznie i jest ich zbyt dużo. Mój pierwszy cel, to dodanie możliwości sortowania danych. Wykorzystam do tego filtr orderBy. To pomoże w jakiś sposób uporządkować dane.
Filtry w AngularJS – orderBy
Do dyrektywy ng-repeat dodaje filtr. Wygląda to tak:
|
1 |
<tr data-ng-repeat="hero in heroes | orderBy:'level'"> |
A oto efekt. Szybko poszło. Dodałem do kodu zaledwie dwa słowa. Po znaku pionowej linii wpisuję nazwę filtra, którego chcę użyć a następnie, po dwukropku, nazwę pola, po którym dane mają być sortowane.
Należy zwrócić uwagę na to, że nazwa pola podana jest w cudzysłowiu. To dlatego, że bez cudzysłowia, program szukałby takiej zmiennej w scope modułu. Za chwilę pokażę to na przykładzie.
Taki wynik wydaje się być ok, ale jednak chciałbym aby użytkownik, miał trochę większy wpływa na to jak sortowane będą dane.
Do HTML dodam następujący kod:
|
1 2 3 4 5 6 |
<select data-ng-model="sortBy"> <option>name</option> <option>class</option> <option>race</option> <option>level</option> </select> |
Jest to menu rozwijane, którego wartości są takie same jak pola w moich wyświetlanych obiektach. Tworzę wiązanie dwukierunkowe pomiędzy wartością tego elementu a nową zmienną scope, sortBy.
Zmieniam też argumentu filtra orderBy. Teraz zamiast dosłownej wartości, przyjmuje on wartośc, zawieraną przez sortBy:
|
1 |
<tr data-ng-repeat="hero in heroes | orderBy:sortBy"> |
A oto wynik. Jest dużo lepiej. Teraz użytkownik może sam wybierać jak aplikacja ma wyświetlać dane.
Jako bonus, dodam jeszcze, że domyślnie Angular sortuje dane rosnąco. Aby sortować je malejąco, czyli od największej wartości w dół, należy do argumentu dodać znak minusa. Nawet jeśli podajemy dosłowną nazwę pola. Aby posortować moje dane po polu level tak aby najpierw wyświetlał się największy, wystarczy w następujący sposób zmienić dyrektywę ng-repeat:
|
1 |
<tr data-ng-repeat="hero in heroes | orderBy:'-level'"> |
Filtry w AngularJS – filter
Kolejny filtr, który chce opisać to filter. filter Pozwala na wyświetlenie jedynie tych pozycji, które spełniają zdefiniowane warunki.
Do istniejącego kodu dodam nowy filtr:
|
1 |
<tr data-ng-repeat="hero in heroes | orderBy:sortBy | filter:{'class':'Warrior'}"> |
Nowy filtr umieściłem za kolejnym znakiem pionowej linii. W ten sposób można dodawać wiele filtrów. Filtr filter filtruje ( 🙂 ) dane zwracając tylko te, które pasują do schematu podanego w argumencie. Powyższy zapis można przetłumaczyć w ten sposób: „zwróć te elementy z kolekcji heroes, których pole class równe jest Warrior„.
Jak widać, działa bez zarzutu. Do tego poprzednio ustawiony filtr wciąż pozwala na sortowanie widocznych informacji. Aplikacja wyświetla nam samych wojowników, których możemy posortować według poziomu lub imienia.
Na koniec dodam jeszcze dwa elementy select:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<select data-ng-model="classFilter"> <option></option> <option>Warrior</option> <option>Mage</option> <option>Cleric</option> <option>Ranger</option> </select> <select data-ng-model="raceFilter"> <option></option> <option>Human</option> <option>Elf</option> <option>Dwarf</option> <option>Hobbit</option> </select> |
Wartość tych elementów także dowiązałem do odpowiednich zmiennych w scope. Tym razem, jedną opcję w każdym select pozostawiam pustą. Wybranie pustej opcji spowoduje, że ta kolumna nie będzie filtrowana.
Pozostało mi już tylko odpowiednio zmienić przypisanie filtrów:
|
1 |
<tr data-ng-repeat="hero in heroes | orderBy:sortBy | filter:{'class':classFilter} | filter:{'race':raceFilter}"> |
I już użytkownik może sam filtrować dane w aplikacji.
W tym krótki poście przedstawiłem absolutne podstawy dotyczące filtrów w AngularJS. Mimo swej prostoty, dają one ogromne możliwości. Dobrze wykorzystane przez programistę, nawet te podstawy, mogą pomóc w stworzeniu wspaniałej aplikacji.
W Następnym poście pokażę jak usprawniać filtry przekazując im funkcje definiujące sposób filtrowania. Kolejnym krokiem będzie tworzenie własny filtrów. Na koniec oczywiście zbuduję większy przykład wykorzystując całą zdobytą dotychczas wiedzę.
Zachęcam do polubienia mojej strony na facebooku. Zamieszczam tam informacje o nowościach na blogu, więc zawsze będziesz na bieżąco ze wszystkimi wpisami. Jest to również dobre miejsca aby kontaktować się ze mną. Na wszystkie pytania chętnie odpowiem.