Question

目前我正在尝试使用子菜单呈现菜单。你们可以看到我也可以在子菜单中使用子菜单。我能够创建一个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"内，您可以使用其中一个。{1}}。像，

  <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级别，这将非常有用。

working plunker example

使用嵌套的ng-repeat使用childs渲染<li>

1 个答案: