9

我很难思考如何使用 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：本周早些时候我通过filterByTag(tag)在我的控制器中调用一个函数来完成这个工作。这将遍历任务数组中的每个任务，如果它具有匹配的标签，它将隐藏该任务。类似地，重新激活一个标签会做同样的事情，循环遍历每个人并发挥魔法......但我被告知我的方法很慢+过度杀伤，因为“角度过滤器可以为你处理所有这些，它会成为最佳实践”。因此，我为什么在这里，试图弄清楚如何让 Angular 为我完成工作:)

任何帮助表示赞赏！

4

1 回答 1

25

您可以编写一个自定义过滤器。过滤器将获得活动标签列表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>

看看这个小提琴。

于 2014-02-25T20:21:06.737 回答