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 =“显示其标签包含此标签的任务”：

So you'd see a big row of buttons like this

单击某个按钮会将其变为灰色，过滤掉表中包含该标记的任何任务。然后，我可以再次单击按钮以重新打开该标签，重新显示该标签的所有任务。

我是否清楚地解释了这一点？这是一个混乱的系统。

无论如何，我尝试了以下内容：

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

有人介意我指向正确的方向吗？：）

PS：本周早些时候，我通过在控制器中调用filterByTag(tag)函数来完成此工作。这将遍历任务数组中的每个任务，如果它具有匹配的标记，则会隐藏该任务。类似地，重新激活标签会做同样的事情，循环每个人并且工作魔术......但是我被告知我的方法很慢+过度杀伤，因为“角度过滤器可以处理所有的那对你而言，它会更加实用“。因此，为什么我在这里，试图找出如何让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。

AngularJS过滤器基于字符串数组？

1 个答案: