Angularjs: ng-repeat filter object within array of objects

Question

I have created a plunker which explains what I am trying to achieve. http://plnkr.co/edit/XAghimH20qwxQGjO42gP?p=preview

I have this array of objects $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'},
            ]
        },
        ];

For the outside menu when searched, for eg like Access or Organization, only the searched item is returned.

But when inside menu is searched, for eg like City List, in result I get all the other objects also including City List. I was expecting to get only City List.

I have observed that for a nested array of objects, the filter is not working.

I may be wrong. Please guide me learning something new.

UPDATE @Vivek solution worked. But now I am facing another issue. I have added some other arrays to my existing array.
As I type Bulk or upload in the search field, the submenu appears. But as soon as I typing the second word (for eg Bulk logs or upload logs), the submenu disappears.

If it had appeared when first word was typed, why did it disappeared when the second word was type.Why is it happening?

UPDATE Thank you all for your time and responses.

There are two exclusive filters in your code, they are not related and hence are pure pattern matches in their own array. I'd suggest you to remove the filter from the top ng-repeat. — Aragorn
– Aragorn, Commented Oct 7, 2018 at 18:18
Checked it. If I do so, all the main menus are displayed, with the searched submenu if any. Is there a way to hide the upper menu if not submenu is found? — Steve
– Steve, Commented Oct 7, 2018 at 18:25
Updated the answer, that might work for your use case, take a look. — Aragorn
– Aragorn, Commented Oct 7, 2018 at 19:04

Farinaz · Accepted Answer · 2018-10-07 17:59:47Z

4

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

answered Oct 7, 2018 at 17:59

Farinaz

3751 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hitesh Kansagara · Accepted Answer · 2018-10-07 17:52:32Z

3

you have to also write filter in sub menu ng-repeat like below,

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

answered Oct 7, 2018 at 17:52

Hitesh Kansagara

3,6063 gold badges20 silver badges34 bronze badges

13 Comments

Steve Over a year ago

It works, but some new issues have come. I have updated the plunker. Please help in resolving the issue.

Hitesh Kansagara Over a year ago

because of Log word is not present in your submenu

Hitesh Kansagara Over a year ago

you should have to make to search boxes one for menu and second for submenu it will solve your issue

Steve Over a year ago

Can't do that sir, I need the single box to search both the menus. Can there be some custom filter made to resolve such issue where if nothing found in submenu, whole submenu is displayed, would this be possible?

Hitesh Kansagara Over a year ago

for that you have to write your own custom filter

|

Aragorn · Accepted Answer · 2018-10-07 19:03:50Z

2

Filter is only applied to the first loop, you need to add the filter on the submenu ng-repeat like this:

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

For your updated usecase, this might help, basically there is filter on the submenu, but the main menu is showed if the submenu is active or the search contains any of the text from menu:

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

edited Oct 7, 2018 at 19:03

answered Oct 7, 2018 at 17:48

Aragorn

5,3295 gold badges28 silver badges40 bronze badges

3 Comments

Steve Over a year ago

That fixed it, but now I am facing other issue. Posting it now. I have updated the PLUNKER.

Steve Over a year ago

I have updated the plunker with new issue and array. Please help in resolving the issue.

Steve Over a year ago

I will revert after I have checked. Thank you for response. Good night

Collectives™ on Stack Overflow

Angularjs: ng-repeat filter object within array of objects

3 Answers 3

Comments

13 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

13 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related