javascript - 基于字符串数组的 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 }" 无济于事。

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

PS: 本周早些时候，我通过在我的 Controller 中调用一个 filterByTag(tag) 函数来实现这个功能。这将遍历任务数组中的每个任务，如果它具有匹配的标签，它将隐藏该任务。类似地，重新激活一个标签会做同样的事情，遍历每个人并发挥魔力......但我被告知我的方法很慢+矫枉过正，因为“Angular 过滤器可以处理所有那对你来说，这将是更多的最佳实践”。因此，我来​​这里的原因是想弄清楚如何让 Angular 为我完成工作:)

感谢任何帮助!

Answer 1

你可以写一个自定义 filter .过滤器将获得事件标签列表 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>

看看这个 fiddle .