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!

Answer 1

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>

Answer 2

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.