W dzisiejszym wpisie będę kontynuował posta, w którym omawiałem filtry w AngularJS. Ostatnim razem opisałem jak działają filtry orderBy oraz Filter.
Filtry przypisuję do dyrektywy ng-repeat. Dzięki nim wyświetlone zostają tylko te dane modelu, które zgadzają się z filtrem. Filtry jako wartości przyjmowały konkretne zmienne według których filtrowano dane. Dziś pokaże przykłady jak jako wartości filtrów używać funkcji.
Do ilustrowania przykładów wykorzystam taką samą prostą stronę z aplikacją w Angularze jak ostatnio. Początkowo nie dzieje się w niej nic specjalne. Jest to po prostu tabelka, wypełniona danymi za pomocą dyrektywy ng-repeat. Dane pobieram z zewnętrznego pliku, który nie zmienił się od ostatniego posta. Czas zaimplementować jakiś filtr 🙂 .
Filtry w AngularJS – filter
Zaimplementuję filtr, który zwróci wszystkie elementy, o polach class równych jest Warrior, i opolach level zawierających wartość większą niż 15. Aby to zrobić muszę zdefiniować funkcję. Nazwę ją getHighLevelWarriors.
Najpierw dodam odpowiedni filtr w widoku i przekażę mu nową funkcję.
|
1 |
<tr data-ng-repeat="hero in heroes | filter:getHighLevelWarriors"> |
Teraz muszę jeszcze zdefiniować funkcję w scope:
|
1 2 3 |
$scope.getHighLevelWarriors = function(item){ return item.class == "Warrior" && item.level >= 15; } |
A oto wynik. Prosta sprawa. Funkcja, która przekazywana jest filtrowi zostaje odpalona dla każdego elementu w filtrowanej kolekcji. Jako argument otrzymuje aktualny element. Jeżeli funkcja zwróci wartość true, element zostanie wyświetlony. W przeciwnym razie jest odfiltrowywany.
W moim przypadku, funkcja jest bardzo prosta. Sprawdzam wynik porównania pola class z łańcuchem Warrior oraz wynik sprawdzania czy pole level zawiera wartość większą lub równą 15. Porównania połączone są logicznym operatorem AND i zwracane. W ten sposób do widoku trafiają tylko odpowiednie dane.
Oczywiście, można też trochę bardziej rozwinąć tę funkcję, tak aby korzystała z zewnętrznych zmiennych.
Do widoku dodam pole select oraz pole input.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="sortUI panel"> Class: <select data-ng-model="classFilter"> <option>All</option> <option>Warrior</option> <option>Mage</option> <option>Cleric</option> <option>Ranger</option> </select> <br/> Level: <input type="number" data-ng-model="levelFilter"/> </div> |
Element select wygląda bardzo podobnie, do tych które pokazywałem w ostatnim wpisie. Nowością jest opcj1 All. Element input otrzymał atrybut type równy number, dzięki czemu będzie przyjmował jedynie liczby. Oba pola zostały powiązane ze zmiennymi ze scope.
|
1 2 |
$scope.classFilter = "All"; $scope.levelFilter = 0; |
Są one początkowo ustawione na All oraz zero. Dzięki temu te właśnie wartości będą domyślnie wyświetlone w elementach select i input po otwarciu aplikacji. Teraz czas na wprowadzenie odpowiednich zmian w funkcji getHighLevelWarriors. Na początek zmienię jej nazwę na mającą większy sens filterClassLevel:
|
1 2 3 4 5 6 |
$scope.filterClassLevel = function(item){ if($scope.classFilter === "All") { return item.level >= $scope.levelFilter; } return item.class == $scope.classFilter && item.level >= $scope.levelFilter; }; |
Funkcja najpierw sprawdza czy zmienna classFilter nie jest równa All. Jeśli tak, sprawdza w elementach tylko pole level, porównując je ze zmienną levelFilter. Jeśli classFilter nie jest równe All elementy są filtrowane tak jak wcześniej, z tą różnicą że pola porównywane są z zawartościami odpowiednich zmiennych. Tak wygląda aplikacja z tym filtrem.
Dużo wygodniejszy sposób na definiowanie bardziej skomplikowanych filtrów niż to co pokazywałem ostatnio 🙂 Do tego programista ma zdecydowanie większą kontrolę nad tym co się dzieje.
Filtry w AngularJS – orderBy
Na potrzeby przykładu, wrócę do początkowej wersji aplikacji czyli do tego stanu. Tym razem dodam filtr orderBy. W poprzednim poście, pokazałem jak stosować ten filtr aby sortować dane. Mógł on jednak posortować dane tylko według pojedynczej wartości. Alternatywą jest sortowanie według funkcji. Pozwoli na bardziej skomplikowany sort.
Chciałbym aby dane w tabelce posortowane były po wartości level ale, żeby magowie byli wyświetlani na samej gorze, niezależnie od poziomu. Mogę to zrobić przekazując filtrowi orderBy funkcję, którą sam napisze. Nową funkcję nazwę magesFirst. Oto ona:
|
1 2 3 4 5 6 |
$scope.magesFirst = function(item) { if(item.class === "Mage") { return 0; } return item.level; } |
Funkcja, którą przekazuje się orderBy, zostaje wywołana dla każdego elementu z sortowanej kolekcji. W argumencie otrzymuje aktualny element. Wartość która zwróci funkcja, będzie brana pod uwagę podczas sortowania. W moim wypadku, jeżeli funkcja natrafi na element, którego pole class równe jest mage, zwrócone zostanie zero. Czyli ten element, będzie na liście pierwszy (sortowanie domyślnie jest rosnące). Jeżeli napotkany element nie będący magiem, zwrócona zostanie jego poziom.
Wystarczy jeszcze tylko dodać odpowiedni filtr do widoku:
|
1 |
<tr data-ng-repeat="hero in heroes | orderBy:magesFirst"> |
W ten sposób otrzymałem filtr, który sortuje dane tak jak tego chcę. Oto wynik.
Jak widać w Angularze, dzięki paru prostym zabiegom, można w naprawdę wyszukany sposób sortować i filtrować dane. W kolejnym poście pokażę jak od zera tworzyć własne filtry.
Jeżeli masz jakieś pytania, nie krępuj się, napisz je w komentarzu. Na każde pytanie odpowiem. Dobrym miejscem na kontakt ze mną jest tez moja strona na facebooku. Jest ona na bieżąco aktualizowana, więc jeśli chcesz jako pierwszy wiedzieć o nowościach na blogu, zachęcam do jej polubienia.