Как подсчитать количество отфильтрованных значений в Angular JS (filter)?

Question

[Ramil Z.]

Все привет!
Подскажите, пожалуйста, о имеющие опыт в Angular JS.
Задача следующая: есть строка поиска фраз и соответственно список фраз. Необходимо подсчитать количество найденных фраз и вывести на экран. Напр.: всего - 10500, найдено - 399.

ng-repeat="item in main.keywords | keywordsFilter:keywordCtrl.filterModel1 | keywordsFilter:keywordCtrl.filterModel2 | keywordsFilter:keywordCtrl.filterModel3 | keywordsFilter:keywordCtrl.filterModel4 | limitTo: 300 | orderBy:'freq':true"

.filter('keywordsFilter', function () {
            return function (items, criterion) {
                return items.filter(function (element, index, array) {
                    var str = String(element.phrase);
                    if (str.indexOf(criterion) + 1) {
                        return true;
                    } else {
                        element.visible = false;
                    }
                });
            }
        })

<ul class="list-inline">
            <li>Всего фраз: {{main.keywords.length}}</li>
            <li>Найдено: {{ ??? }}</li>
        </ul>

Answer 1

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

сделайте это в директиве, подготовьте данные в контроллере и все. Не надо пытаться сделать это заведомо неудобно и не правильно (с архитектурной точки зрения).

Comments

[Ramil Z.]

Спасибо. Я тоже стремлюсь к упрощению. Но с Angular начал работать всего месяц, поэтому еще не хватает знаний и опыта. Можете поподробнее объяснить.
"Сделать в директиве" - вы имеете в виду "Всего фраз... Найдено..."?
"Подготовить в контроллере" - в контроллере самой директивы?

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

Ramil Z.: да, все должно быть директивой, все подсчеты и т.д. должны быть в контроллере. Фильтры можно использовтаь как чистые функции для форматирования вывода но не более того.

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

Ramil Z.: напишите мне в личку, если вас это не затруднит. Мне как раз нужен кто-то кто только учится ангуляру (почитать статейку и сказать что не понятно)

[Ramil Z.]

Сергей Протько: ты имеешь в виду: ng-repeat="item in main.filteredKeywords". А этот main.filteredKeywords фильтровать при

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

Ramil Z.: нет, прокинуть в шаблон уже отфильтрованный массив.

[Ramil Z.]

Сергей Протько: понял. То есть вообще не использовать такие вещи, как ng-repeat и filter. Но делать свою директиву типа . И уже в контроллере этой директивы keywordsList делать все операции с фильтрацией, построчным выводом и т.п.
Я правильно понял?

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

Ramil Z.: нет, ngRepeat - используйте, не используйте filter в темплейтах.

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

Ramil Z.: если что любой фильтр можно использовать как сервис в контроллере. То есть если вам удобнее отфильтровать все ангуляром - воспользуйтесь оным. Но не в темплейте. Это более-менее безболезненно только в angular2 в силу асинхронности тамшнего аналога фильтров, ну и в целом это часть "логики", и логике не место в шаблонах. Ей и в контроллере места нет толком.

По поводу ресурсов. Из того что есть на данный момент могу порекомендовать только эдакий план по изучению ангуляра: https://github.com/gdi2290/ngExam

[Ramil Z.]

Спасибо большое. Теперь все становится понятным в Angular, т.к. фронтенд с использованием Angular начал изучать и применять недавно. До этого все в основном на php Yii2 со статичными страницами + jquery. В Yii2 мне все понятно с разделением (контроллеров, моделей и вьюх), а в Angular еще не совсем было все понятно.

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

Ramil Z.: ну это так же спорный вопрос) большинство разработчиков воспринимает как контроллер как "место которое меняет модель". А контроллер должен только просить модель поменять состояние. По итогу мы можем видеть огромное количество толстых контроллеров, разрастание дублирования кода и т.д. Сейчас благо с этим чуть получше чем лет 5 назад.

Во фронтэнде все то же самое. Тот же MVC (собственно почти никто MVC не использует, на бэкэнде это MVA или Model2, а на фронтэнде это MVA, MVVM и другие вариации одной и той же идеи). Из последних трендов - Flux, который можно описать как канонический MVC 79-ого года и event sourcing.

Answer 2

[Николай]

Вы же не хотите грузить на фронт все 10500( а если их будет 100500) значений? Делайте это на бэке, и показывайте только то, что нужно.
P.S.
Чтобы получить модельку с отфильтренными записями - можно написать как-то так:

ng-repeat="item in main.filteredKeywords = (main.keywords | filter1| fliter2|....)"

Comments

[Ramil Z.]

Не знал что так можно приравнять и вывести. Спасибо.

[Ramil Z.]

Все верно, их действительно может быть 100500 значений. Что вы имеете в виду - "грузить на бэке"?
Всмысле, с фронтенда посылать поисковые фразы на бэкенд и возвращать на фронтэнд ответ в виде массива найденных данных?

[Николай]

Ramil Z.: ну конечно - посылать на бэк параметры, делать запрос к бд с этими параметрами и отдавать то, что нужно.

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

Николай: хватит фильтровать коллекции в шаблонах!

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

Николай: попробуйте потом это дело юнит тестами покрыть так что бы не надо было браузер поднимать.

[Николай]

Сергей Протько: я же написал, что так делать не стоит! Но если уж человеку очень хочется ( =

Answer 3

[Ramil Z.]

Вот, что я пытаюсь сделать.
Backend сделан простой без применения фрэймворков, чисто для загрузки данных.
Исходники: https://github.com/proteye/keywords-grouper
Пример можно посмотреть здесь: proteye.ru