javascript AngularJS - 基于类别等的复杂过滤
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13312393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - complex filtering based on categories etc
提问by Pierlo Upitup
I've done some google-fu but all I can find about AngularJS filters is simple examples about simple filters (mostly on a single field's value).
我已经做了一些 google-fu 但我能找到的关于 AngularJS 过滤器的只是关于简单过滤器的简单示例（主要是单个字段的值）。
What I'm after thoguh is somewhat more complex, and I kinda look for help on how to tackle my situation.
我对 thoguh 的追求有点复杂，我有点想寻求有关如何解决我的情况的帮助。
Imagine you have an array of the following JSON objects:
假设您有一个包含以下 JSON 对象的数组：
{
"id":"1",
"title":"Title",
"categories":[
{"id":"14","name":"DIY"}
],
"topics":[
{"id":"12","name":"Junk Food"}
]
},
{
"id":"2",
"title":"Title 2",
"categories":[
{"id":"4","name":"Test"},
{"id":"14","name":"DIY"},
],
"topics":[
{"id":"2","name":"Food"}
]
}
[...]
so basically each object can have ANY number of "categories" and / or "topics".
所以基本上每个对象都可以有任意数量的“类别”和/或“主题”。
Now, my goal is to create a frontend interface that allows me to cumulatively apply various kinds of filters to those JSON objects.
现在，我的目标是创建一个前端接口，允许我将各种过滤器累积应用于这些 JSON 对象。
For example, I'd like to say: show only the entries that have category.id = 14 AND topic.id = 2 [etc] and still support deep-linking for the filtered results.
例如，我想说：仅显示具有 category.id = 14 AND topic.id = 2 [etc] 的条目，并且仍然支持过滤结果的深层链接。
So here's where I'm stuck:
所以这就是我被困的地方：
1) what's the best way to use routes for this (ie how would you structure the URLs to support ANY number of filter (based on different values)
1）为此使用路由的最佳方法是什么（即，您将如何构建 URL 以支持任意数量的过滤器（基于不同的值）
2) how should i keep track of the filters added? (ie, how many and which filters have been selected by the user)
2）我应该如何跟踪添加的过滤器？（即，用户选择了多少和哪些过滤器）
Looking at the documentation for the AngularJS filtersI'll obviously use the 2nd example for the filtering parameter:
查看AngularJS 过滤器的文档，我显然将使用第二个示例作为过滤参数：
Object: A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1". A special property name $ can be used (as in {$:"text"}) to accept a match against any property of the object. That's equivalent to the simple substring match with a string as described above.
对象：模式对象可用于过滤数组包含的对象的特定属性。例如 {name:"M", phone:"1"} 谓词将返回属性名称包含“M”和属性电话包含“1”的项目数组。可以使用特殊的属性名称 $（如在 {$:"text"} 中）来接受与对象的任何属性的匹配。这相当于简单的子字符串匹配上面描述的字符串。
But I'm not so sure on how to make sure i'm checking the right field (ie topic.id for topics vs category.id for categories)...
但我不太确定如何确保我正在检查正确的字段（即主题的 topic.id 与类别的 category.id ）...
Simply put, I'd love to see an example for such a less-trivial filtering scenario.
简而言之，我很想看到这样一个不太重要的过滤场景的例子。
采纳答案by Roy Truelove
I think you need something like thisinstead. See his 'other simple alternative'. I do complex filtering in a service that's injected into my controller, and expose the filtered list on my $scope to the View. I only use Angular filters for relatively simple tasks.
我认为你需要像这样来代替。请参阅他的“其他简单替代方案”。我在注入控制器的服务中进行复杂过滤，并将 $scope 上的过滤列表公开给视图。我只将 Angular 过滤器用于相对简单的任务。
Re: the question about how to expose this on the URL, you'll need some way of representing those filters as strings, and can use $location and $routeParams to populate them into your controller.
回复：关于如何在 URL 上公开它的问题，您需要某种方式将这些过滤器表示为字符串，并且可以使用 $location 和 $routeParams 将它们填充到您的控制器中。
回答by Peter
This can work if you write a custom filter:
如果您编写自定义过滤器，这可以工作：
var module = angular.module('app', []);
module.filter("property", ["$filter", function($filter){
var parseString = function(input){
return input.split(".");
}
function getValue(element, propertyArray) {
var value = element;
angular.forEach(propertyArray, function(property) {
value = value[property];
});
return value;
}
return function (array, propertyString, target) {
var properties = parseString(propertyString);
return $filter('filter')(array, function(item){
return getValue(item, properties) == target;
});
}
}]);
HTML part can look like this:
HTML 部分可能如下所示：
<ul>
<li ng-repeat="data in items | property:'categories.id':<id_of_a_category_we_want>">
{{ data }}
</li>
</ul>
Credit: OnOFF-Switch blog
