AngularJS滤过嵌套的NG重复

Question

我有2个嵌套的ng重复，可以填充这些类别下的类别和项目列表。我正在尝试实现搜索过滤器：

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

• 我试图实现一个Custon过滤器以循环循环，并根据项目的标题或类别的名称填充数组，但它创建了一个无限的环路。

  <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视图不匹配

您可能需要阅读过滤文档