Как работают простые фильтры в Ангуляре?

Question

[Max]

Здравствуйте, есть 2 варианта, оба делают только одну половину работы, а как обьеденить не знаю)

<tr ng-repeat="product in products | filter:query | orderBy:predicate | orderBy:price">

Первый вариант все сортирует и выводит идеально Но

<h1 ng-show="products.length == 0">Empty products</h1>

В этой строчке выводится все количество продуктов в массиве.(А не количество оставшихся после сортировки) Плюс кнопка

<a href="#" class="btn btn-danger" ng-click="clear()">Clear</a>

Не обнуляет фильтр.
Второй вариант

<tr ng-repeat="product in products = (products | filter:query | orderBy:predicate | orderBy:price)">

Тут как-то испортилась сортировка,но фильтры обнуляются и выводится только количество отфилтрованых товаров.
Короче оба варианта работают только на 50%.
https://jsbin.com/nuvuwileje/edit?html,js,output

Первый вариант работает лучше,но как настроить отображение количества только отфильтрованых продуктов??

Answer 1

[Сергей Протько]

оба делают только одну половину работы, а как обьеденить не знаю

Сделайте нужную вам коллекцию в контроллере, а лучше в сервисе. Прекратите использовать фильтры для коллекций. Да можно, но только для очень простых случаев и только для того что бы быстро сделать на коленке.

Comments

[Max]

Спасибо! Буду меняться.

[Max]

А как же тогда фильтровать товары например, по цене? Я понимаю что можно задать фильтр в контроллере, но тогда покупатель (скажем из интернет магазина) не сможет сам указать цену в пределах которой ему нужны товары. Или я что-то не понимаю?

[Сергей Протько]

Max: данные приходят в контроллер, контроллер это дело адаптирует для view, view видит что пришли данные (ангуляр это делает через дата биндинг) и реагирует под ваше описание (то что у вас в шаблонах, директивы и прочее). Когда пользователь кликает что-то или выбирает другой вариант фильтрации товаров, view уведомляет об этом контроллер. Тот просит сервисы дать данных под новые условия и цикл повторяется. По сути это старый добрый MVC. Именно так мы получаем весьма гибкую архитектуру.