Фильтр AngularJS на основе массива строк?

Question

Мне трудно понять, как использовать фильтр Angular для решения проблемы, с которой я столкнулся.

Вот базовый пример моей структуры данных, массива задач:

var tasks = [
    { Title: "This is a task title",
      Tags: ["Test","Tag","One","Two","Three"] },
    { Title: "Another test tag title",
      Tags: ["Some", "More", "Tags"] },
    { Title: "One more, why not",
      Tags: ["I","Like","Dirt"] },
    { Title: "Last one!",
      Tags: ["You","Like","Dirt"] }
];

Таким образом, каждый объект имеет массив тегов.Для примера предположим, что я вывожу каждый из этих объектов в виде строки в таблице.

Как только страницы ng-controller инициализируются, я получение всех тегов из всех задач (без дубликатов) и собрать их в tags множество.

Затем я вывожу эти теги в виде переключаемых кнопок на странице.По умолчанию все кнопки синие, что означает «активные» (другими словами:показывать задачи с содержащимся в них этим тегом).Мне нужно иметь возможность нажать на одну из этих кнопок, чтобы «отключить» этот тег, что позволит отфильтровать все строки задач в таблице, в которых задача имеет этот тег.

Вот так для наглядности: серый = «скрыть задачи, теги которых содержат этот тег», синий = «показать задачи, теги которых содержат этот тег»:

.

Нажатие на кнопку делает ее серой, отфильтровывая все задачи в таблице, имеющие этот тег.Затем я могу снова нажать кнопки, чтобы снова включить этот тег, повторно показывая все задачи с этим тегом.

Я объясняю это достаточно ясно?Это запутанная система.

Во всяком случае, я попробовал следующее:

ng-filter="task in filteredWithTags = (tasks | filter: { tags: arrayOfTags }" но безрезультатно.

Кто-нибудь не против указать мне правильное направление?:)

ПС: У меня это сработало ранее на этой неделе, позвонив filterByTag(tag) функция в моем контроллере.Это будет проходить через каждую задачу в массиве задач, и если у нее будет соответствующий тег, она скроет эту задачу.Сходным образом повторная активация тег будет делать то же самое, проходить через всех и творить чудеса...но мне сказали, что мой метод был медленным и излишним, потому что «угловые фильтры могут справиться со всем этим за вас, и это будет более передовой практикой».Поэтому я здесь и пытаюсь понять, как позволить Angular сделать всю работу за меня :)

Любая помощь приветствуется!

Answer 1

Вы можете написать собственный фильтр.Фильтру будет предоставлен список активных тегов, tags, и массив задач для фильтрации, tasks, и выведет массив отфильтрованных тегов.Это будет почти то же самое, что вы уже сделали, но без каких-либо дополнительных функций.

angular.module('myApp').filter('selectedTags', function() {
    return function(tasks, tags) {
        return tasks.filter(function(task) {

            for (var i in task.Tags) {
                if (tags.indexOf(task.Tags[i]) != -1) {
                    return true;
                }
            }
            return false;

        });
    };
});

Тогда вы можете использовать его как

<ul>
    <li ng-repeat="task in tasks | selectedTags:tags"></li>
</ul>

Проверьте это скрипка.