javascript - ng-重复未知数量的项目

Question

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

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

正如您从上面的示例中看到的那样，子类别可以包含此列表树可以永远继续下去的子类别。

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

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

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

我希望你知道我将如何处理这个问题，当我不知道有多少级别时，我如何才能制作一个遵循上述数组模式的可靠列表？

Answer 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}} 将显示最低的树/数据结构的级别(当前子级)。