角動態嵌套ng-repeat生成

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 sub - 因為我必須假設可能級別的最大數量並為此構建，我不會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

你可以使用遞歸。

你可以在這里和那里找到例子。

創建模板並重復此模板（使用include或指令）。 在模板中，再次在同一模板上放置ng-repeat。

希望它可以提供幫助。

Answer 3

你可以使用angular-ui-tree