嵌套ng-repeats中的AngularJS过滤器

Question

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

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

• 我试图实现一个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视图不匹配

您可能需要阅读过滤器文档