创建具有NG重复多级列表(Creating multi-level lists with ng-re

我试图从包含嵌套数据的对象进行多级列表：

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: '#',
        }
    ];
}

为什么这仅输出前2个菜单，而忽略第三个？

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

Answer 1:

您只能看到两个级别，因为你只得到了环路的两个层次：NG-重复刚刚重复过什么给了，不递归调用本身。

你的第一个循环重复刚刚在第一级，和你的第二个循环重复刚才在第二个层次。 有没有在你的代码寻找一个第三级或任何更深的层次。

你可以调用相同的NG-包括递归，然后在出现的工作。 我在这里plunker这demo'ed： http://plnkr.co/edit/NBDgqKOy2qVMQeykQqTY?p=preview

但是，代码是非常可怕采用NG-init进程各地复制值。 它的工作原理，但它也许可以更好地写成一个指令。

文章来源: Creating multi-level lists with ng-repeat