Question

我正在寻找一种基于某些数据生成嵌套菜单的方法，我想解决的问题是：

我不知道每次有多少子级别的数据（它是动态的），我想根据ng-repeats的数据生成菜单。我想要一种生成菜单的方法，而无需对重复级别进行硬编码。因此，如果有2或10，它将填补自己。

所以现在我很难对重复级别进行编码：

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

所以我想知道是否有一种方法可以根据数据生成嵌套重复（它将继续在其内部）。所以JSON的1级下降就像这样。

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

所以我想知道那些潜艇是否在它们内部有另一个子级别（可能再次称为潜艇，如果我可以有角度生成一个新的嵌套重复，而不是基于当前是否具有ng-show的硬编码级别item有任何subs - 因为我必须假设可能级别的最大数量并为此构建，我不会100％知道它将是什么。

感谢阅读！

Answer 1

您可以为每个新的子级别创建模板并包含它。

<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

您可以使用递归。

您可以找到示例here和there。

创建模板并重复此模板（使用include或指令）。在模板中，再次将ng-repeat放在同一模板上。

希望它可以提供帮助。

Answer 3

您可以使用 angular-ui-tree

角动态嵌套ng-repeat生成

3 个答案: