使用 ng-repeat 创建多级列表

我正在尝试从包含嵌套数据的对象创建多级列表：

function linksRarrange($scope) {
    $scope.links = [
        {
            text: 'Menu Item 1',
            url: '#',
        },{
            text: 'Menu Item 2',
            url: '#',
            submenu: [
                {
                    text: 'Sub-menu Item 3',
                    url: '#',
                },{
                    text: 'Sub-menu Item 4',
                    url: '#',
                    submenu: [
                        {
                            text: 'Sub-sub-menu Item 5',
                            url: '#',
                        },{
                            text: 'Sub-sub-menu Item 6',
                            url: '#',
                        }
                    ]
                }
            ]
        },{
            text: 'Menu Item 3',
            url: '#',
        }
    ];
}

为什么只输出前两级菜单而忽略第三级菜单？

<ul>
    <li ng-repeat="link in links"><a href="{{link.url}}">{{link.text}}</a>
        <ul>
            <li ng-repeat='sublink in link.submenu'><a href="{{sublink.url}}">{{sublink.text}}</a></li>
        </ul>
    </li>
</ul>

您只看到两个级别，因为您只有两个级别的循环： ng-repeat 只是重复给定的内容，并且不会递归地调用自身。

您的第一个循环仅在第一个级别上重复，第二个循环仅在第二个级别上重复。您的代码中没有任何内容寻找第三级或任何更深的级别。

您可以递归地调用相同的 ng-include ，这似乎有效。我在这里用 plunker 演示了这个：http://plnkr.co/edit/NBDgqKOy2qVMQeykQqTY?p=preview http://plnkr.co/edit/NBDgqKOy2qVMQeykQqTY?p=preview

但是使用 ng-init 复制值的代码非常糟糕。它有效，但可能最好将其编写为指令。