基于IS AngularJS过滤结果

Filter result based on IS AngularJS

本文关键字：结果 过滤 AngularJS IS 基于      更新时间：2023-09-26

我有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 =预览"

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的项也将匹配，如柱塞所示(对属性值进行字符串比较)。

幸运的是，您可以在过滤器表达式中提供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

您可以筛选想要的类别:

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

http://plnkr.co/edit/hHe2AS2gzm35mEqnHoQ3?p =预览

你可以在angular中创建自己的滤镜，你可以尝试这样做:

  <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;
    }
}]);

查看更新后的柱塞:http://plnkr.co/edit/96aX0cqLT9SJX2YZquns?p=preview

有关过滤器的更多信息，请查看文档

相关文章：