AngularJS

Filter je service koji služi za prikaz samo onih podataka koji zadovoljavaju određeni uvjet.

Bind upotreba

Iako se zove filter ovdje služi za preoblikovanje, tj. ovdje filter ne služi za filtriranje niza podataka već pretvara ulaz u neki drugi format i to šalje nazad u {{}} bind izlaz.
Sintaxa:
{{ulaz | filterName: parametar}}
ili
ng-bind="ulaz | filterName: parametar"

Predefinirani filteri koji se ovdje koriste su:

• currency - dodaje naziv valute ispred broja i zaokružuje na 2 decimale
• number:N - zaokružuje broj na N decimala
• uppercase - pretvara sva slova u velika
• lowercase - pretvara sva slova u mala
• date - pretvara UNIX Timestamp u čitljiv datum
• json - pretvara JS objekt u JSON

Predefinirani filteri koji pretvaraju ulaz. Primjer sa {{}}:
pokreni primjer » HTML+JS code

Predefinirani filteri koji pretvaraju ulaz. Primjer sa ng-bind:
pokreni primjer » HTML+JS code

Repeat upotreba

Ovdje se filter koristi unutar ng-repeat direktive kako bi iz niza izdvojio samo one članove niza koji zadovoljavaju određeni uvjet.

ng-repeat="elem in niz | filterName:uvjet"

Predefinirani filteri:

• limitTo:N - ograničava izlazni niz na N elemenata
• filter:srch - ograničava izlaz na varijable unesene sa ng-model="srch"
• orderBy:var;reverse=false - sortira niz po varijabli var. Ako je reverse=true onda je descending sortiranje.

limitTo filter - upotrijebljen običan niz:
pokreni primjer » HTML+JS code

limitTo filter - upotrijebljen niz objekata:
pokreni primjer » HTML+JS code

orderBy filter - upotrijebljen niz objekata:
pokreni primjer » HTML+JS code

sortBy filter - primjer sa linkovima za sortiranje:
pokreni primjer » HTML+JS code

| filter:sel
pokreni primjer » HTML+JS code

PIPE |

Pomoću pipe znaka | može se nanizati više filtera uzastopce.

Upotreba unutar JS

Filter se može upotrijebiti i unutar JS tj. controllera.
Pri tome je potrebno učiniti dvije stvari:

1. dodati $filter kao argument controller funkciji

2. definirati filtriranje sa:
$filter('filterName')(arg1, arg2)

Na koji način pomoću filtera učiniti sva slova velikim:
pokreni primjer » HTML+JS code

Pomoću dugmeta mijenjati mala u velika slova i obrnuto:
pokreni primjer » HTML+JS code

Pomoću $filter i limitTo ispisati samo prva 3 elementa niza:
pokreni primjer » HTML+JS code

Složeno filtriranje u JS pomoću $filter, ng-click i ng-change te limitTo i orderBy:
pokreni primjer » HTML+JS code

Definiranje vlastitog filtera

Osim predefiniranih filtera koje smo naveli gore mogu se definirati i vlastiti filteri za ng-bind i ng-repeat. Obično sve vlastite filtere pišemo u zaseban fajl te ga uključujemo u HTMl dokument sa <script src="angular.filters.js"></script>.

Vlastiti filter koji čini prvo slovo u riječi (ucwords) ili rečenici (ucfirst) velikim. Upotreba u HTML-u:
pokreni primjer » HTML+JS code

Vlastiti filteri koje mijenjamo pomoću ng-click u buttonima. Upotreba u JS-u:
pokreni primjer » HTML+JS code