Использование фильтров AngularJS filters. Angular ng-repeat filter и собственный фильтр

Пример использования фильтров AngularJS filters. Директива angular ng-repeat и метод filter(). Создание собственного фильтра (custom filter).

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Используемые технологии и библиотеки
  • Spring MVC 4.2.4.Release
  • AngularJS 1.5.0
  • IntelliJ IDEA 15.0.2

1. Описание задачи

Рассмотреть применение фильтров в AngularJS. Определение фильтра с помощью метода filter(). Использование фильтров в выражениях AngularJS и в директиве ng-repeat. Так же создадим собственный фильтр (custom filter) и применим его в представлении.

2. Структура проекта

Структура проекта с предыдущей части не поменялась. Рассматриваемая тема находится в представлении filters.jsp.

3. Описание фильтров в AngularJS

В AngularJS фильтры форматируют значение выражения для отображения его пользователю. Фильтры могут быть использованы в шаблонах представлений, контроллерах, сервисах. Так же есть возможность создать свой собственный фильтр. Общая запись применения фильтра в выражениях на странице представления выглядит так:

Например, если записать {{ 12 | currency }}, то будет применен встроенный фильтр для отображения валюты. В итоге мы увидим (в зависимости от локали) — $12.00. Фильтров может быть много:

В этом случае первый результат будет обработан вторым фильтром и т.д.. Это называется ‘chaining’.

Еще у фильтров могут быть аргументы.

Запись {{ 1234 | number:2 }} даст в итоге 1,234.00.

Фильтры можно применять в контроллерах, указывая название фильтра в атрибуте директивы. Рассмотрим эти примеры в коде.

4. Применение фильтров в AngularJS

Сначала создадим модуль myApp. В нем определим контроллер myController и объекты companies, browser, currentDate. Так же создадим собственный (custom filter) фильтр newFilter с помощью метода .filter().

Теперь посмотрим как использовать фильтры в представлении.

Здесь рассматриваются фильтры:

  • limitTo — лимит выводимых данных. В нашем случае из пяти компаний будут выведены только три.
  • uppercase, lowercase — преобразование в верхний и нижний регистры.
  • json — преобразование первого элемента массива из companies в объект JSON.
  • date:’MM/dd/yyyy’ — применение фильтра к дате.
  • newFilter — применение собственного фильтра к объекту test.

5. Запуск приложения

Результат работы фильтров можно увидеть на этом скриншоте.

filtersRun

 

Исходные коды

MVC_AngularJS_Html5 full project — полный проект Spring MVC + AngularJS + Bootstrap + HTML5.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Share Button
1
1591 Total Views 2 Views Today

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

CAPTCHA

*