javascript - 基于 IS AngularJS 过滤结果

Question

我有来自 JSON 文件的数据。我正在显示类别列表，但我想过滤该列表并仅显示带有“parent:0”的类别。

"categories": [
            {
                "id": 51,
                "slug": "knarr",
                "title": "Knarr",
                "description": "",
                "parent": 8,
                "post_count": 2
            },
            {
                "id": 15,
                "slug": "service-vessels",
                "title": "Service Vessels",
                "description": "",
                "parent": 0,
                "post_count": 1
            }
        ],

请在此处检查我的代码“http://plnkr.co/edit/1vcIAPSwvxQcbIzMhyzp?p=preview”

Answer 1

Angular 的 filter提供程序已经能够按属性过滤列表(如 ng-repeat )。在 HTML 中，这将类似于以下内容:

<ul ng-repeat="category in categories | filter:{parent: 0}">
------------------------------ HERE --^

演示: http://plnkr.co/edit/HXvkmar7I7HpgPbv6LVM?p=preview

不幸的是，使用的默认匹配是部分的。这意味着，如果parent属性包含“0”。例如，任何具有 parent: 10 的项目也会匹配，如 plunker 所示(对属性值进行字符串比较)。

幸运的是，您可以提供true在过滤器表达式中，它将进行完全匹配。这意味着使用这个:

<ul ng-repeat="category in categories | filter:{parent: 0}:true">
-------------------------------------------------- HERE --^

演示: http://plnkr.co/edit/m22ML9XPf2FnZweuModU?p=preview

<小时/>

另外，作为一个建议，输入 ng-repeat 似乎很奇怪在<ul>上元素 - 我希望它位于 <li> 上元素。

<小时/>

查看其他答案中的评论，您还希望仅显示唯一的类别。由于您的 JSON 意味着类别具有唯一的 id s，您可以为您的应用程序创建自定义过滤器，如下所示:

app.filter("uniqueCategoryFilter", function () {
  return function (categories) {
    var uniqueCategories, catIds;
    uniqueCategories = [];
    catIds = {};
    if (categories) {
      angular.forEach(categories, function (category) {
        if (!catIds[category.id]) {
          catIds[category.id] = true;
          uniqueCategories.push(category);
        }
      });
    }
    return uniqueCategories;
  };
});

并像这样使用它:

<ul ng-repeat="category in categories | filter:{parent: 0}:true | uniqueCategoryFilter">
-------------------------------------------------------- HERE --^

演示: http://plnkr.co/edit/3NHuTvQiVHQTZxtIkEGB?p=preview

确保此独特的过滤器位于 parent 之后属性过滤器。

<小时/>

引用文献:

• AngularJS API filter : https://docs.angularjs.org/api/ng/filter/filter