5

我已经做了一些 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 过滤器的文档，我显然会使用第二个示例作为过滤参数：

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

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

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

4

2 回答 2

3

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

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

于 2012-11-09T21:04:45.493 回答
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 博客

于 2014-09-05T11:46:16.530 回答