Angular dynamic nested ng re-generation

Question

I'm looking for a way to create a submenu based on some data, the problem I would like to work with is this:

I don’t know how many sub-levels of data I will have each time (this is dynamic), and I would like to generate a menu based on data with ng repeats. I would like to create a menu without hard-coding repeat levels. So, if there are 2 or 10, it will fill up.

So, now I hard code the repeat levels as follows:

<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 am wondering if there is a way to generate nested repeats (which will continue internally) based on the data. So the 1st level of JSON is as follows.

 $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'
  }
];

, - ( subs , angular , , , ng-show if - , , , 100%.

!

Answer 1

ng- -.

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

:

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

Answer 2

.

.

ng- ( ). ng-repeat, .

, .

Answer 3

You can use angular-ui-tree for this