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

Question

我创建了一个 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），子菜单就会消失。

如果打第一个字的时候出现了，为什么打第二个字的时候就消失了type.Why是这样吗？

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

Answer 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>

Answer 2

你还必须在子菜单 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>

Answer 3

  <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>

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

Angularjs: ng-repeat filter object within array of objects

javascript

angularjs

filter

angularjs-filter