基于字符串数组的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屋!