嵌套 ng-repeats 中的 AngularJS 过滤器

Question

我有 2 个嵌套的 ng-repeats 来填充这些类别下的类别和项目列表。我正在尝试实现一个搜索过滤器：

• 如果项目的标题包含搜索过滤器的字符串，则应显示该项目及其类别。
• 如果类别名称包含搜索过滤器的字符串，则应显示该类别。如果该类别下的项目没有匹配过滤器，则应显示该类别下的所有项目。
• 搜索过滤器绑定到输入字段的模型。

• 我试图实现一个自定义过滤器来循环遍历类别并根据项目的标题或类别的名称填充一个数组，但它会创建一个无限循环。

  <li data-ng-repeat="group in vars.filteredCategories = (allCategories | customFilter:filters.searchText)">
  {{group.category}}
  <ul>
  <li data-ng-repeat="item in group.items | orderBy:'title'">{{item.title}}</li>
  </ul>
  

控制器：

$scope.allCategories = [{"category":"cat1","items":[{"id":10015,"title":"Test","category":"cat1"},{"category":"cat2","items":[{"id":10015,"title":"Test2","category":"cat2"}];

自定义过滤器（不起作用）

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

            var itemsPushed = [];
            if (search !== '') {
                angular.forEach(categories, function (category) {
                    if (category.category.toLowerCase().indexOf(search.toLowerCase()) !== -1) {
                        filtered.push(category);

                    } else {
                        if (angular.isDefined(category.items)) {

                            var itemsInside = angular.copy(category.items);
                            category.items = [];

                            for (var x = 0; x < itemsInside.length; x++) {
                                if (itemsInside[x].title.toLowerCase().indexOf(search.toLowerCase()) != -1 && itemsPushed.indexOf(itemsInside[x].id) == -1) {
                                    category.items.push(itemsInside[x]);
                                    itemsPushed.push(itemsInside[x].id);

                                }
                            }
                            filtered.push(category);
                        }
                    }
                });
            } else {
                filtered = categories;
            }

            return filtered;
        };
    })

Answer 1

检查这是不是你想要的http://plnkr.co/edit/zt2BJEpRv2EBbFf32rBC?p=preview

如果您想要不区分大小写的比较，可能需要修改代码。

控制器

app.controller('MainCtrl',function ($scope) {
  $scope.filterText = '';
  $scope.data = [
    {"category":"cat1",
      "items":[{"id":10015,"title":"Test","category":"cat1"}, {"id":10015,"title":"Other","category":"cat1"}]
    },
    {"category":"cat2",
      "items":[{"id":10015,"title":"Test2","category":"cat2"}]
    }];
});

过滤器

app.filter('customFilter', function(){
  return function(data, searchString) {
    if (searchString === '') {
      return data;
    }
    // don't modify original state
    var newData = [];
    data.forEach(function(group){
      // If the name of the category contains the string of the search filters, 
      // this category should be displayed. If non of the items under this category match the filter,
      // all the items under the category should be displayed.
      var matchCategory = group.category.indexOf(searchString) > -1;
      var nonItemMatches = group.items.every(function(item){
        return item.title.indexOf(searchString) === -1;
      });
      if (matchCategory || nonItemMatches) {
        newData.push(group);
        return
      }
      // If the title of an item contains the string of the search filter,
      // this item and its category should be displayed.
      var groupCustomItems = angular.extend({}, group);
      groupCustomItems.items = [];
      group.items.forEach(function(item) {
        if (item.title.indexOf(searchString) > -1) {
          groupCustomItems.items.push(item);
        }
      });
      if (groupCustomItems.items.length) {
        newData.push(groupCustomItems);
      }
    });
    return newData;
  };
});

查看

<input type="text" ng-model="filterText" />
  <ul>
    <li ng-repeat="group in data | customFilter:filterText">
      {{ group.category }}
      <ul>
        <li ng-repeat="item in group.items">
          {{ item.title }} 
        </li>
      </ul>
  </ul>

我不得不假设您的数据是错误的，因为它与您的 html 视图不匹配

您可能想阅读filter 文档