Javascript 嵌套ng重复中的AngularJS过滤器

我有两个嵌套的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>
  

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

  .filter（'customFilter'，函数（）{
  返回函数（类别、搜索）{
  var筛选=[]；
  var itemsPushed=[]；
  如果（搜索！=''）{
  角度。forEach（类别，函数（类别）{
  if（category.category.toLowerCase（）.indexOf（search.toLowerCase（））！=-1）{
  过滤、推送（类别）；
  }否则{
  if（角度定义（类别项目））{
  var itemsInside=角度.copy（category.items）；
  category.items=[]；
  对于（var x=0；x

  检查这是否是您想要的
  如果要进行不区分大小写的比较，可能需要修改代码
  控制器

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

  看法

  
  
  
  {{group.category}
  
  
  {{item.title}
  
  
  
  

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

  ---

  您可能需要阅读文档
  我相信您的循环是因为您正在修改category.items。你能删除你的过滤器的大“其他”部分，并告诉我你是否仍然得到那个错误吗？谢谢你的回答。如果我移除了那个部分，我就不需要循环了，但它不能像我需要的那样工作。因为我只需要在类别与筛选器不匹配的情况下，在与筛选器匹配的情况下将项目添加到filtered。但是无限循环停止了吗？我只是想确定我说的是问题所在。然后我们可以从那里开始工作是的，是的。对不起，我以为我在留言里说了，但我错了。谢谢你的数据正确吗？我正在复习小提琴，我只看到一个有3个深度的项目。检查$scope.allCategories，如果书写正确，非常感谢！这正是我想要的。非常感谢您抽出时间。

  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>