javascript - 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'},
            ]
        },
        ];

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

但是当搜索内部菜单时，例如 like City List，结果我得到所有其他对象也包括City List. 我期待得到只有City List.

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

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

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

如果在输入第一个单词时出现了，为什么在输入第二个单词时它消失了。为什么会发生？

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

标签： javascriptangularjsfilterangularjs-filter

Answer 1

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