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数组.

然后,我将这些标签输出为页面上的可切换按钮.默认情况下,所有按钮均为蓝色,表示"活动"(换句话说:显示包含此标记的任务).我需要能够单击其中一个按钮来"切换"该标记 - 这将过滤掉任务具有该标记的表中的任何任务行.

像这样的视觉参考 - gray ="隐藏其标签包含此标签的任务",blue ="显示其标签包含此标签的任务":

.

单击按钮将其变为灰色,过滤掉表中具有该标记的任何任务.然后,我可以再次单击按钮以重新打开该标签,并使用该标签重新显示所有任务.

我能够清楚地解释清楚吗？这是一个令人困惑的系统.

无论如何,我尝试过以下方法:

ng-filter="task in filteredWithTags = (tasks | filter: { tags: arrayOfTags }" 无济于事.

有人介意我指向正确的方向吗？:)

PS:本周早些时候我通过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>

看看这个小提琴.