Angularjs: объект фильтра ng-repeat в массиве объектов - PullRequest
Новая
       32

Angularjs: объект фильтра ng-repeat в массиве объектов

0 голосов
/ 07 октября 2018

Я создал вантуз, который объясняет, чего я пытаюсь достичь.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), подменю исчезнет.

Если оно появилось, когда было набрано первое слово, почему оно исчезло, когда второе слово было набрано. Почему это происходит?

ОБНОВЛЕНИЕ Спасибо всем за вашевремя и ответы.

Ответы [ 3 ]

0 голосов
/ 07 октября 2018

Вы также должны написать фильтр в подменю 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>
0 голосов
/ 07 октября 2018 
  <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>
0 голосов
/ 07 октября 2018

Фильтр применяется только к первому циклу, вам нужно добавить фильтр в подменю 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>
...