Angularjs：对象数组中的ng-repeat过滤器对象答案

【问题标题】：Angularjs: ng-repeat filter object within array of objectsAngularjs：对象数组中的ng-repeat过滤器对象
【发布时间】：2019-03-12 09:29:24
【问题描述】：

我创建了一个 plunker，它解释了我想要实现的目标。 http://plnkr.co/edit/XAghimH20qwxQGjO42gP?p=preview

我有这个对象数组 $scope.menus

    $scope.menus = [
          {   
            name: 'Access',
            submenu: [
              { name: 'User List'},
            ]
          },
          {
            name: 'Organization',
            submenu: [
              { name: 'City List'}, 
              { name: 'State List'},
              { name: 'Country List'},
            ]
          },
{
            name: 'Upload Logs',
            submenu: [
                { name: 'Inventory Uploads'},
            ]
        },
        {
            name: 'Bulk Logs',
            submenu: [
                { name: 'Bulk Renewals'},
            ]
        },
        ];

搜索到的外部菜单，例如Access或Organization，只返回搜索到的项。

但是当搜索内部菜单时，例如City List，结果我得到所有其他对象也包括City List。我原本希望只收到City List。

我观察到，对于嵌套的对象数组，过滤器不起作用。

我可能错了。请指导我学习新的东西。

更新 @Vivek 解决方案有效。但现在我面临另一个问题。我在现有数组中添加了一些其他数组。
当我在搜索字段中键入 Bulk 或 upload 时，将出现子菜单。但是只要我输入第二个单词（例如Bulk logs 或upload logs），子菜单就会消失。

如果输入第一个字的时候就出现了，为什么输入第二个字就消失了。为什么会这样？

更新谢谢大家的时间和回复。

【问题讨论】：

您的代码中有两个排他的过滤器，它们不相关，因此是它们自己数组中的纯模式匹配。我建议您从顶部 ng-repeat 中删除过滤器。
检查过了。如果我这样做了，所有的主菜单都会显示出来，如果有的话，还有搜索到的子菜单。如果没有找到子菜单，有没有办法隐藏上层菜单？
更新了答案，这可能适用于您的用例，看看吧。

标签： javascript angularjs filter angularjs-filter

【解决方案1】：

过滤器只适用于第一个循环，您需要在子菜单ng-repeat上添加过滤器，如下所示：

<html>
  <head>
    <title>AngularJS ng-repeat filter</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body ng-app="app">

  <div ng-controller="democontroller">

      <input type="text" placeholder="Search text" ng-model="menuSearch">
      <ul>
        <li ng-repeat="menu in menus | filter : menuSearch">
            <span href="#">{{menu.name}}</span>
            <ul>
                <li ng-repeat="submenu in menu.submenu | filter: menuSearch"> <!--Notice filter added here-->
                    <a href="#">{{submenu.name}}</a>
                </li>
            </ul>
        </li>
      </ul>

    </div>

  </body>
</html>

对于您更新的用例，这可能会有所帮助，基本上子菜单上有过滤器，但如果子菜单处于活动状态或搜索包含菜单中的任何文本，则会显示主菜单：

<html>
  <head>
    <title>AngularJS ng-repeat filter</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body ng-app="app">

  <div ng-controller="democontroller">

      <input type="text" placeholder="Search text" ng-model="menuSearch">
      <ul>
        <li ng-repeat="menu in menus"  ng-if="(menu.submenu | filter: menuSearch).length > 0  || (menu.name.includes(menuSearch))">
            <span href="#">{{menu.name}}</span>
            <ul>
                <li ng-repeat="submenu in menu.submenu | filter : menuSearch">
                    <a href="#">{{submenu.name}}</a>
                </li>
            </ul>
        </li>
      </ul>

    </div>

  </body>
</html>

【讨论】：

修复了它，但现在我面临其他问题。现在发布它。我已经更新了 PLUNKER。
我已经用新的问题和数组更新了 plunker。请帮助解决问题。
我会在检查后恢复。感谢您的回复。晚安

【解决方案2】：

  <input type="text" placeholder="Search text" ng-model="menuSearch">
  <ul>
    <li ng-repeat="menu in menus | filter : menuSearch">
        <span href="#">{{menu.name}}</span>
        <ul>
            <li ng-repeat="submenu in menu.submenu | filter : menuSearch">
                <a href="#">{{submenu.name}}</a>
            </li>
        </ul>
    </li>
  </ul>

</div>

【讨论】：

【解决方案3】：

您还必须在子菜单 ng-repeat 中编写过滤器，如下所示，

<html>
  <head>
    <title>AngularJS ng-repeat filter</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body ng-app="app">

  <div ng-controller="democontroller">

      <input type="text" placeholder="Search text" ng-model="menuSearch">
      <ul>
        <li ng-repeat="menu in menus | filter : menuSearch">
            <span href="#">{{menu.name}}</span>
            <ul>
                <li ng-repeat="submenu in menu.submenu | filter : menuSearch">
                    <a href="#">{{submenu.name}}</a>
                </li>
            </ul>
        </li>
      </ul>

    </div>

  </body>
</html>

【讨论】：

它有效，但出现了一些新问题。我已经更新了 plunker。请帮助解决问题。
因为您的子菜单中没有 Log 字词
您应该将搜索框设置为第一个用于菜单，第二个用于子菜单，它将解决您的问题
不能那样做，先生，我需要一个框来搜索两个菜单。是否可以制作一些自定义过滤器来解决此类问题，如果在子菜单中找不到任何内容，则会显示整个子菜单，这可能吗？
为此您必须编写自己的自定义过滤器