Javascript AngularJS-基于类别等的复杂过滤

我做过一些google fu，但我能找到的关于AngularJS过滤器的所有简单示例都是关于简单过滤器的（主要是关于单个字段的值）

我所追求的是thoguh有点复杂，我有点想寻求帮助来解决我的情况

假设您有一个包含以下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"}
    ]
}

[...]

因此，基本上每个对象可以有任意数量的“类别”和/或“主题”

现在，我的目标是创建一个前端接口，它允许我对这些JSON对象累积应用各种过滤器

例如，我想说：只显示category.id=14和topic.id=2[etc]的条目，并且仍然支持对过滤结果的深度链接

这就是我被困的地方：

1） 使用路由的最佳方式是什么（即如何构造URL以支持任意数量的过滤器（基于不同的值）

2） 我应该如何跟踪添加的过滤器？（即，用户选择了多少个过滤器和哪些过滤器）

查看文档中的过滤参数，我将使用第二个示例：

对象：模式对象可用于过滤数组包含的对象的特定属性。例如{name:“M”，phone:“1”}谓词将返回一个项目数组，其中属性名称包含“M”，属性phone包含“1”。可以使用特殊属性名$（如{$：“text”}）来接受与对象的任何属性的匹配。这相当于上面描述的简单子字符串与字符串匹配

但我不太确定如何确保我检查了正确的字段（即主题的topic.id与类别的category.id）

---

简单地说，我希望看到这样一个不那么琐碎的过滤场景的示例。

我认为您需要类似的东西。看看他的“其他简单的选择”。我在注入控制器的服务中进行复杂过滤，并将$scope上的过滤列表公开给视图。我只对相对简单的任务使用角度过滤器

---

Re：关于如何在URL上公开这些内容的问题，您需要某种方式将这些筛选器表示为字符串，并可以使用$location和$routeParams将它们填充到控制器中。

如果您编写自定义筛选器，则可以这样做：

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部分可以如下所示：

<ul>        
    <li ng-repeat="data in items | property:'categories.id':<id_of_a_category_we_want>">
        {{ data }}
    </li>
</ul>

{{data}}

---

信用证：

当前，筛选器不支持像您希望的那样遍历内部数组。您必须编写自己的自定义筛选器。