<li> 使用嵌套的 ng-repeat 与子项一起渲染

Question

目前我正在尝试用子菜单渲染菜单。就像你们可以看到的那样，我也可以使用sub菜单的子菜单。我能够创建一个JavaScript

这就是我现在拥有的

  $scope.menu = [
            {
                icon: 'glyphicon glyphicon-home', title: 'Home', path: '/', tile: false, fn: null, allowAll: true, childs: []
            },
            {
                icon: 'glyphicon glyphicon-home', title: 'Reporting', path: '', tile: false, fn: null, allowAll: true, childs:
                    [
                    { title: 'Compensation Report', path: '/Reports/Compensation', tile: false, fn: null, allowAll: false, childs: [] },
                    { title: 'Representative Level Report', path: '/Reports/AgentId', tile: false, fn: null, allowAll: false, childs: [] },
                    { title: 'Territory Report', path: '/Reports/Territory', tile: false, fn: null, allowAll: false, childs: [] },
                    {  title: 'Reporting Access', path: '/Reports/Acces', tile: false, fn: null, allowAll: false, childs: [] }
                    ]
            },
{ icon: 'glyphicon glyphicon-home', title: 'Administrator', path: '', tile: false, fn: null, allowAll: true, childs:
            [
                { title: 'Users', path: '', tile: false, fn: null, allowAll: true, childs:
                [
                     { title: 'Users managment', path: '', tile: false, fn: null, allowAll: true, childs: [] },
                        { title: 'Invite user', path: '', tile: false, fn: null, allowAll: true, childs: [] },
                        { title: 'Create user account', path: '', tile: false, fn: null, allowAll: true, childs: [] }
                ]
                },
            ]}];

这是我用来渲染菜单的JavaScript

<nav role="navigation" class="navbar navbar-default navbar-bigfont" style="border-width: 0">
                    <ul class="nav nav-pills nav-stacked">
                        <li class="portal-text-19b" ng-repeat="item in menu" ng-class="{active: hightlight === item.title && item.path !== '#'}" ng-show="showItem(item.path, item.allowAll)">
                            <a href="{{item.path}}" ng-click="item.fn()">
                                <span class="{{item.icon}}"></span>&nbsp;
                                {{item.title}}
                            </a>
                        </li>
                    </ul>
                </nav>

Answer 1

这很简单！在您当前的ng-repeat(即ng-repeat="item in menu"(内，您可以拥有另一个。

  <li class="portal-text-19b" ng-repeat="item in menu" ...>
    <a href="{{item.path}}" ng-click="item.fn()">
      <span class="{{item.icon}}"></span>{{item.title}}
    </a>
    <ul>
      <li ng-repeat="child in item.childs">
        {{child.title}}
        <ul>
          <li ng-repeat="child2 in child.childs">
            {{child2.title}}
          </li>
        </ul>
      </li>
    </ul>
  </li>

现在，由于它具有略有复制的HTML，因此您可能需要考虑创建模板并使用ng-include来使用它，如果您想进行此动态直到N级别，这将很有用。

。

工作plunker示例