Angular dynamic nested ng-repeat generation

Question

I am looking for a way to generate a nested menu based off some data, the problem I would like to work around is this:

I don't know how many sub levels of data I will have each time (it's dynamic) and I would like to generate the menu based on the data with ng-repeats. I would like a way to generate the menu without hard coding the repeat levels. So if there's 2 or 10 it would fill itself in.

So right now I'm hard coding the repeat levels like so :

<ul class="outerMenu" >
        <li ng-repeat="level in globalMenu" ng-click="showSubs =! showSubs" >{{level.name}} {{level.subs.length}}
            <ul ng-if="level.subs.length > 0" ng-show="showSubs">
                <li ng-repeat="sub in level.subs" ng-click="$event.stopPropagation()">{{sub.name}}


                </li>

            </ul>
        </li>
    </ul>

So I'm wondering if there is a way to generate the nested repeats (that would continue to go withinside of itself) based on the data. So 1 level down of the JSON looks like this.

 $scope.globalMenu = [
  {
    'name' : 'level 1',
    'subs' : [
            {
              'name' : 'level 1-1'
            },
             {
              'name' : 'level 1-2'
            },
             {
              'name' : 'level 1-3'
            },
             {
              'name' : 'level 1-4'
            }
            ]
  },
   {
    'name' : 'level 2'
  },
   {
    'name' : 'level 3'
  },
   {
    'name' : 'level 4'
  },
   {
    'name' : 'level 5'
  }
];

So I'm wondering if those subs had another sub level inside of them (presumably called subs again, if I could have angular generate a new nested repeat, instead of having hard coded levels that ng-show based on if the current item has any subs - as I would have to assume the max number of possible levels and build for that and I do not 100% know what that will be.

Thanks for reading!

what u have done seems right to me...

micronyks
– micronyks

2014-12-16 18:30:45 +00:00
Commented Dec 16, 2014 at 18:30 — micronyks
– micronyks, Commented Dec 16, 2014 at 18:30

Josef Joe Samanek · Accepted Answer · 2014-12-16 18:41:32Z

5

You can create a template and ng-include it for every new sub-level.

<script type="text/ng-template" id="menu_sublevel.html">
    {{ sub.name }}
    <ul ng-if="item.subs">
        <li ng-repeat="item in item.subs" ng-click="$event.stopPropagation()">
            {{sub.name}}
        </li>
    </ul>
</script>

Then in your view just define the top level:

<ul class="outerMenu">
     <li ng-repeat="item in globalMenu" ng-click="$event.stopPropagation()" 
         ng-include="'menu_sublevel.html'"></li>
</ul>

edited Dec 16, 2014 at 18:41

answered Dec 16, 2014 at 18:36

Josef Joe Samanek

1,70412 silver badges17 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:24:17Z

3

You can use recursion.

You can find examples here and there.

Create a template and ng-repeat this template (with include or directive). And in the template, put a ng-repeat again, on the same template.

Hope it can help.

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Dec 16, 2014 at 18:28

Thierry

5,2533 gold badges27 silver badges30 bronze badges

Comments

Ben Diamant · Accepted Answer · 2014-12-16 18:29:46Z

1

You can use angular-ui-tree for that

answered Dec 16, 2014 at 18:29

Ben Diamant

6,2164 gold badges39 silver badges51 bronze badges

Collectives™ on Stack Overflow

Angular dynamic nested ng-repeat generation

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related