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

问题描述

我有一个很难周围环绕我的头怎么去这样做角度滤波器来解决我遇到的一个问题。

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-控制器初始化页面，我的抓住所有的标签从所有的任务（不重复），并把它们吸入一个标记阵列。

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-过滤器=任务filteredWithTags =（任务|过滤器：{标签：arrayOfTags}。无济于事

心中有人指着我的方向是正确的？ ：）

Someone mind pointing me in the right direction? :)

PS：我通过调用 filterByTag（标签）函数在我的控制器有这种本周早些时候的工作。这将通过任务的阵列中的每个任务循环，如果有匹配的标签，这将隐藏的任务。同样的重新启动标记会做同样的事情，遍历每个人的工作和魔法......但我告诉我的方法是缓慢+矫枉过正，因为角过滤器可处理所有的对于你，它会更加最佳practicy。因此，为什么我在这里，试图找出如何让角做的工作对我来说：）

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 :)

任何帮助AP preciated！

Any help is appreciated!

推荐答案

您可以编写一个自定义的过滤。该过滤器将被赋予有源标签，标记的列表，并且待过滤的任务的阵列，任务，和将输出滤波标记的阵列。这将是一样一样的你已经做了，但对适用范围没有额外的功能。

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>

看看这个小提琴。

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