Фильтр только по нужному столбцу в Angular

Продолжая тему работы с ng-repeat в Ангуляр фреймворк, хочу рассказать о том, как работать с кастомными фильтрами.

Можно вернуться к примеру в прошлой статье, где мы добавили фильтр в ng-repeat, чтобы разобраться с азами. Я немного «доработал» пример. Теперь это уже не список танков, а табличка. И я добавил параметр «год начала производства».

Скачать архив примера.

HTML файл стал вот таким:

А это код модуля:

В контексте контроллера ngRepDemo выводится таблица танков с помощью директивы ng-repeat. Для связи фильтра и поля ввода используется директива ng-model.

Попробуем ввести в поле число ноль.

filter-input-zero

Видим, что помимо Т-90МС, фильтру соответствует и танк M1A2, потому что ноль встречается в его данных о годе начала производства. Хотелось бы фильтровать отдельно столбец с названием. Но для этого придется создать и запрограммировать собственный фильтр.

Кастомый фильтр для фильтрации по столбцу

В HTML коде поменяется немного, нужно указать имя фильтра и передать ему нужные параметры.

filterByName — ещё пока не создан. Любой фильтр в качестве первого параметра будет получать список элементов цикла (у нас это rep.list), а дальше через двоеточие вы можете передать дополнительные параметры. У нас таким параметром выступает «s».

Объявим фильтр filterByName в нашем модуле:

Фильтр — это функция, которая должна возвращать специальную функцию :), которая в свою очередь возвращает список элементов, удовлетворяющих критериям фильтрации.

На входе мы видим два параметра — items и criterion. items — обязательно передаётся в любой кастомный фильтр, а criterion — это дополнительный параметр произвольного типа, и их может быть произвольное число. Ровно столько, сколько вам необходимо.

В нашем случае, в фильтре проверяется название танка на соответствие критерию:

В итоге я возвращаю новый список элементов, которые собираются в массиве tmp.

Остаётся лишь опробовать работу фильтра:

filter-for-one-column-angular

Теперь все так, как и хотелось.

Кастомные фильтры не только для циклов

Кастомные фильтры применяются не только в ng-repeat, тогда в качестве первого параметра может быть передан не список, а, к примеру, какая то константа или объект. Так функционируют встроенные фильтры для форматирования вывода даты:

и валюты:

Мало букафф? Читайте есчо !

Обмен данных Angular с бек-энд на PHP

Ноябрь 11, 2016 г.

Стоит ли рассказывать, что Ангуляр при всей своей прелести лишь одна сторона медали - frontend, который как то должен взаимодействовать со второй половинкой ...

Читать

Премудрости ng repeat в Angular

Ноябрь 25, 2016 г.

ngRepeat - рабочая лошадка в шаблонах, используемых при работе с AngularJS. Цикл имеет множество опций, работает с фильтрами и сортировкой, может подключать ...

Читать

 

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: