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

【问题标题】：AngularJS - complex filtering based on categories etcAngularJS - 基于类别等的复杂过滤
【发布时间】：2012-11-09 16:50:41
【问题描述】：

我已经做了一些 google-fu，但我能找到的关于 AngularJS 过滤器的所有内容都是关于简单过滤器的简单示例（主要针对单个字段的值）。

尽管如此，我所追求的有点复杂，我有点寻求帮助来解决我的情况。

假设您有一个包含以下 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 AND topic.id = 2 [etc] 的条目，并且仍然支持过滤结果的深层链接。

这就是我卡住的地方：

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

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

查看AngularJS filters 的文档，我显然会使用第二个示例作为过滤参数：

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

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

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

【问题讨论】：

目前，filter 不支持像你想要的那样遍历内部数组。您必须编写自己的自定义过滤器。

标签： javascript json angularjs

【解决方案1】：

我认为您需要类似 this 的东西。请参阅他的“其他简单替代方案”。我在注入到我的控制器中的服务中进行复杂的过滤，并将我的 $scope 上的过滤列表公开给视图。我只将 Angular 过滤器用于相对简单的任务。

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

【讨论】：

【解决方案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 blog

【讨论】：