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

你可以用角度制作自己的滤镜，你可以试试这样的东西：

  <div ng-controller="ListCtrl">
      <ul ng-repeat="category in categories | customFilter:category">
          <li>{{category.title}}</li>
      </ul>
  </div>

和过滤器：

app.filter('customFilter', [function () {
    return function (items) {
        var filtered = [];

        angular.forEach(items, function (item) {

          if(item.parent === 0 && indexOf(item) < 0) {
            filtered.push(item);
          }
        })

        return filtered;
    }
}]);

请参阅更新的plunker：http://plnkr.co/edit/96aX0cqLT9SJX2YZquns?p=preview

有关过滤器的详情，请查看docs

Answer 2

您可以过滤想要的类别：

$scope.categories = $scope.categories.filter(function(category) {
  return category.parent === 0;
});

http://plnkr.co/edit/hHe2AS2gzm35mEqnHoQ3?p=preview

Answer 3

Angular的filter提供程序已经能够按属性过滤列表（如ng-repeat）。在HTML中，这将如下所示：

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

DEMO： http://plnkr.co/edit/HXvkmar7I7HpgPbv6LVM?p=preview

不幸的是，使用的默认匹配是部分的。这意味着，如果parent属性包含“0”。例如，任何具有parent: 10的项目也会匹配，就像plunker所示（字符串比较是在属性值上完成的）。

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

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

DEMO： http://plnkr.co/edit/m22ML9XPf2FnZweuModU?p=preview

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

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

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 --^

DEMO： http://plnkr.co/edit/3NHuTvQiVHQTZxtIkEGB?p=preview

确保此属性过滤器之后。

<强>参考文献：

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

根据IS AngularJS过滤结果

3 个答案: