基于字符串数组的AngularJS过滤器? [英] AngularJS filter based on array of strings?

问题描述

我很难思考如何使用 Angular 过滤器来解决我遇到的问题.

I'm having a hard time wrapping my head around how to go about doing an Angular filter to solve a problem that I'm running into.

这是我的数据结构的一个基本示例，一个任务数组:

Here's a basic example of my data structure, an array of tasks:

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"] }
];

所以每个对象都有一个标签数组.为了举例，假设我将这些对象中的每一个作为表中的一行输出.

So each object has an array of tags. For the sake of example let's say I am outputting each of those objects as a row in a table.

一旦页面 ng-controller 被初始化，我就会从所有任务中获取所有标签(没有重复)并将它们组合成一个 tags 数组.

Once the pages ng-controller is initialized, I'm grabbing all of the tags from all of the tasks (without duplicates) and assembling them into a tags array.

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

Then, I'm outputting those tags as toggle-able buttons on the page. All the buttons are blue by default, meaning "active" (in other words: show tasks with this tag contained therein). I need to be able to click on one of those buttons to "toggle off" that tag -- which will filter out any tasks rows in the table wherein the task has that tag.

这样的视觉参考——灰色=隐藏标签包含此标签的任务"，蓝色=显示标签包含此标签的任务":

Like so for visual reference -- grey = "hide tasks whose tags contains this tag", blue = "show tasks whose tags contain this tag":

.

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

Clicking on a button turns it grey, filtering out any tasks in the table that have that tag. I can then click the buttons again to toggle that tag back on, re-showing all tasks with that tag.

我解释得够清楚了吗?这是一个令人困惑的系统.

Am I explaining this clearly enough? It's a confusing system.

无论如何，我已经尝试了以下方法:

Anyway, I've tried the following:

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

有人介意给我指出正确的方向吗?:)

Someone mind pointing me in the right direction? :)

PS: 我在本周早些时候通过在我的控制器中调用了一个 filterByTag(tag) 函数来实现这个功能.这将遍历任务数组中的每个任务，如果它有匹配的标签，它将隐藏该任务.类似地重新激活标签会做同样的事情，遍历每个人并施展魔法......但我被告知我的方法很慢+矫枉过正，因为角度过滤器可以处理所有对你来说，这将是更好的实践".因此，为什么我在这里，试图弄清楚如何让 Angular 为我完成工作:)

PS: I had this working earlier this week by calling a filterByTag(tag) function in my controller. This would loop through every task in the array of tasks and if it had the tag that matched, it would hide that task. Similarly re-activating a tag would do the same thing, loop through everyone and work the magic... but I'm told that my method was slow + overkill, because "angular filters can handle all of that for you, and it will be more best-practicy". Hence, why I'm here, trying to figure out how to let Angular do the work for me :)

感谢任何帮助！

推荐答案

你可以编写一个自定义的filter.过滤器将获得活动标签列表 tags 和要过滤的任务数组 tasks，并输出一个过滤标签数组.它将与您已经完成的操作大致相同，但作用域上没有额外的功能.

You could write a custom filter. The filter would be given the list of active tags, tags, and the array of tasks to be filtered, tasks, and would output an array of filtered tags. It will be much the same as what you've already done, but with no extra function on the scope.

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;

        });
    };
});

然后你就可以像这样使用

Then you can use it like

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

看看这个fiddle.

这篇关于基于字符串数组的AngularJS过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！