AngularJS i filtry

facebooktwittergoogle_plusredditpinterestlinkedinmail

AngularJS udostępnia kilka ciekawych filtrów, których możemy użyć podczas operowania na danych. Filtry mogą być używane zarówno w kodzie HTML, jak i JavaScript.

Przykład użycia filtrów w kodzie HTML:

{{ filter_expression | filtr_name : expression : comparator}}

oraz w kodzie JavaScript:

$filter(filtr_name)(array, expression, comparator)

Osobom rozpoczynającym pracę z filtrami powyższa składnia niewiele mówi, dlatego przyjrzyjmy się każdemu z filtrów z osobna.

Filtr „date”

Za pomocą filtru date możemy sformatować dowolną datę, podając jedynie format, który nas interesuje. Datę do sformatowania możemy podać w formie milisekund (Date.now()), w formie obiektu daty (new Date()) lub w formie ciągu znaków zgodnego z normą ISO 8601 (2015-07-12T23:55:00+02:00).

Składnia:

{{ date_expression | date : format : timezone}}

kod JavaScript:

angular.module('exApp').controller('filtrsController', [
    '$scope',
    function ($scope) {
        $scope.date = Date.now();
    }
]);

Kod HTML:

<div ng-controller="filtrsController">
    {{ date | date: 'yyyy-MM-dd'}}
</div>

W efekcie zobaczymy:

2015-07-12

Filtr „number”

Kolejnym filtrem udostępnianym przez bibliotekę AngularJS jest filtr number. Filtr ten pozwala nam zaokrąglić podaną liczbę do określonego miejsca po przecinku.

Składnia:

{{ number_expression | number : fractionSize}}

kod JavaScript:

angular.module('exApp').controller('filtrsController', [
    '$scope',
    function ($scope) {
        $scope.date = Date.now();
        $scope.currency = 1275.678;
    }
]);

kod HTML:

<div ng-controller="filtrsController">
    {{ currency | number: 0}}
</div>

Wynikiem działania powyższego kodu będzie wartość:

1,276

Filtr „currency”

Filtr ten działa na podobnej zasadzie jak filtr number, jednakże dodatkowo wyświetla walutę przy podanej liczbie.

Składnia:

{{ currency_expression | currency : symbol : fractionSize}}

Najprostszy przykład użycia filtru currency w kodzie HTML z zastosowaniem domyślnych ustawień:

<div ng-controller="filtrsController">
    {{ currency | currency}}
</div>

W efekcie zobaczymy:

$1,275.68

Możemy nadpisać walutę (lub jak kto woli przedrostek), a także zaokrąglić naszą liczbę do określonego miejsca po przecinku podając kolejne dwa parametry:

<div ng-controller="filtrsController">
     {{ currency | currency : "PLN" : 0}}
 </div>

Wynik powyższej modyfikacji:

PLN1,276

Filtr „json”

Filtr json konwertuje podany kod do formatu JSON, z zastosowaniem spacji i tabulatorów, które znacznie ułatwiają czytanie i rozumienie kodu. Jest on bardzo przydatny podczas debugowania np. gdy trzeba zweryfikować poprawność pobranych z serwera danych. Jedyną rzeczą, o której trzeba pamiętać to wrzucenie filtrowanego wyrażenia do tagu HTML zachowującego oryginalne formatowanie np. pre. W przeciwnym wypadku nie zobaczymy żadnej różnicy.

przykład zastosowania w kodzie HTML:

<div ng-controller="filtrsController">
    <pre>{{ data | json }}</pre>
</div>

bez użycia filtru json i tagu pre:

[{"name":"John","age":26},{"name":"Sarah","age":23}]

z użyciem filtru json:

[
  {
    "name": "John",
    "age": 26
  },
  {
    "name": "Sarah",
    "age": 23
  }
]

Dodatkowo możemy zdefiniować ile spacji powinny zawierać nasze wcięcia, podając ich liczby w argumencie (domyślnie stosowane są 2):

<div ng-controller="filtrsController">
    <pre>{{ data | json : 4}}</pre>
</div>

w wyniku czego w naszym kodzie uzyskamy głębsze wcięcia:

[
    {
        "name": "John",
        "age": 26
    },
    {
        "name": "Sarah",
        "age": 23
    }
]

Filtry „uppercase” i „lowercase”

Filtry te umożliwiają zamianę podanego ciągu znaków na duże i małe litery.

kod JavaScript:

angular.module('exApp').controller('filtrsController', [
    '$scope',
    function ($scope) {
        $scope.man = "John Smith";
        $scope.woman = "Anna Jones";
    }
]);

kod HTML:

<div ng-controller="filtrsController">
    {{ man | uppercase }}<br/>
    {{ woman | lowercase }}
</div>

W przeglądarce zobaczymy:

JOHN SMITH
anna jones

Filtr „limiTo”

Filtr limitTo pozwala nam ograniczyć podaną wartość do konkretnej liczby miejsc. Wartością może być zarówno ciąg znaków, liczba, jak i tablica elementów. Dodatkowo możemy zdefiniować miejsce, od którego filtr ma zacząć wycinać.

Kod JavaScript:

angular.module('exApp').controller('filtrsController', [
    '$scope',
    function ($scope) {
        $scope.name = "John Smith";
        $scope.age = 30;
    }
]);

Kod HTML:

<div ng-controller="filtrsController">
    {{ name | limitTo : 4}}<br/>
    {{name | limitTo : 6 : 4}}<br/>
    {{ age | limitTo: 1 }}
</div>

W efekcie zobaczymy:
John
Smith
3

Tak samo możemy wycinać elementy z tablicy:

kod JavaScript:

$scope.fruits = ['Apple', 'Pear', 'Orange', 'Lemon'];

Kod HTML:

{{ fruits | limitTo : 2}}

Wynik powyższego kodu:

[„Apple”,”Pear”]

Wyżej opisane filtry służą do operowania na typach prostych. Oprócz nich AngularJS dostarcza jeszcze filtry przeznaczone do operowania na tablicach.

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

41 ÷ = 41

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>