6

ネストされたデータを含むオブジェクトから複数レベルのリストを作成しようとしています:

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 つのレベル メニューのみを出力し、3 番目を無視するのはなぜですか?

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

1 に答える 1

7

2 つのレベルのループしかないため、2 つのレベルしか表示されません。ng-repeat は指定された内容を繰り返すだけで、再帰的に呼び出しません。

最初のループは最初のレベルで繰り返され、2 番目のループは 2 番目のレベルで繰り返されます。コードには、第 3 レベルまたはそれ以上のレベルを探すものは何もありません。

同じ ng-include を再帰的に呼び出すことができ、それはうまくいくようです。ここでプランカーでこれをデモしました：http://plnkr.co/edit/NBDgqKOy2qVMQeykQqTY?p=preview

しかし、そのコードは ng-init を使用して値をコピーするのは非常に恐ろしいものです。それは機能しますが、おそらくディレクティブとしてより適切に記述できます。

于 2013-02-11T14:34:19.307 に答える