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

Question

我已经完成了一些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对象。

例如，我想说：仅显示具有类别的条目。ID= 14 and topic.ID = 2 [etc]，并且仍然支持过滤结果的深链接。

所以这是我卡住的地方：

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

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

查看AngularJS过滤器的文档，我显然会使用第二个示例进行过滤参数：

对象：模式对象可用于过滤数组包含的对象上的特定属性。例如{名称：" M"，电话：" 1"}谓词将返回包含" M"的属性名称和包含" 1"的属性的项目。可以使用特殊属性名称$（如{$：" text"}）来接受对象的任何属性的匹配。这等同于与上述字符串的简单子字符串匹配。

，但我不确定如何确保我要检查正确的字段（即主题vs类别。

简单地说，我很想看到这样一个不太平淡的过滤场景的示例。

Answer 1

我认为您需要这样的东西。看到他的"另一个简单的选择"。我会在注入控制器的服务中进行复杂的过滤，并将$范围上的过滤列表公开到视图上。我仅将角滤波器用于相对简单的任务。

re：关于如何将其暴露在URL上的问题，您需要某种方式将这些过滤器表示为字符串，并且可以使用$ location和$ routeparams将它们填充到您的控制器中。

Answer 2

如果您编写自定义过滤器，则可以工作：

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>

信用：Onoff-Switch博客