Question

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

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

var oTextArea = this.getView().byId("selectConditionAS");

  oTextArea.attachLiveChange(function(oEvent){
   var searchkey = oEvent.getSource().getValue();
   console.log(searchkey)
  });

对于搜索时的外部菜单，例如$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。

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

我可能是错的。请引导我学习新知识。

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

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

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

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>

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

过滤器仅应用于第一个循环，您需要像这样在子菜单stroke.startOffset + 4 + offsets.length * 4上添加过滤器：

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>

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

3 个答案: