ng-repeat 未知数量的项目答案

【问题标题】：ng-repeat uknown number of itemsng-repeat 未知数量的项目
【发布时间】：2015-07-13 16:06:52
【问题描述】：

好吧，这看起来很奇怪，但我允许我的用户创建他们想要的任意数量的类别/子类别

当我提取类别数据时，它可能看起来像这样：

从上面的例子可以看出，子类别可以有子类别，这个列表树可以永远存在。

现在尝试制作菜单，我有一个简单的列表：

    <ul class="nav dker">
    <li ui-sref-active="active">
        <a ui-sref="app.ui.jvectormap" href="#/app/ui/jvectormap">
            <span translate="aside.nav.components.ui_kits.VECTOR_MAP" class="ng-scope">Vector Map</span>
        </a>
    </li>
</ul>

这里的问题是我不知道我必须重复多少次子类别，这使我无法知道何时检查它？

我希望你知道我在做什么，当我不知道有多少级别时，如何制作一个遵循上述数组模式的可靠列表？

【问题讨论】：

可能需要制定一个指令来尽可能多地调用自身以继续生成列表
或者也许通过javascript找到深度并生成该深度的html..但这再次导致指令但不一定是递归
请提供您想要生成的输出示例。我猜你需要像 Ramda、Lodash 或 Underscore 这样的集合操作库来获得你想要的东西。
这可能很有趣：benfoster.io/blog/angularjs-recursive-templates

标签： javascript arrays angularjs multidimensional-array

【解决方案1】：

您将要创建一个递归模板，它基本上看起来像这样：

<div data-ng-include="'displaySubcategory.html'"></div>

其中displaySubcategory.html 包含ng-repeat 和对其自身的递归调用。

<div data-ng-repeat="category in category.subcategories">
    <h1>{{category.name}}</h1>
    <div data-ng-include="'displaySubcategory.html'"></div>
</div>

这个想法是每次调用 ng-repeat 时都会围绕子元素创建范围，因此调用 {{category}} 将显示树/数据结构的最低级别（当前子级）。

【讨论】：