Question

我已经做了一些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类别）...

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

Answer 1

我认为您需要this之类的东西。看看他的“其他简单替代品”。我在注入我的控制器的服务中进行复杂过滤，并将我的$ scope上的过滤列表暴露给View。我只使用Angular过滤器来完成相对简单的任务。

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 blog

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

2 个答案: