Creating multi-level lists with ng-repeat

Question

I am trying to make a multi-level list from an object that contains the nesting data:

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

Why does this outputs only the first 2 level menus and ignores the third?

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

Piran · Accepted Answer · 2013-02-11 14:34:19Z

7

You're only seeing two levels because you've only got two levels of loops: the ng-repeat just repeats over what it's given, and does not call itself recursively.

Your first loop just repeats over the first level, and your second loop just repeats over the second level. There's nothing in your code looking for a 3rd level or any deeper levels.

You can call the same ng-include recursively, and that appears to work. I've demo'ed this in plunker here: http://plnkr.co/edit/NBDgqKOy2qVMQeykQqTY?p=preview

But that code is pretty dreadful using ng-init to copy the values around. It works, but it could probably be better written as a directive.

answered Feb 11, 2013 at 14:34

Piran

7,3371 gold badge26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ilyo Over a year ago

so there is no built in method that iterates recursively?

ilyo Over a year ago

your solution doesn't really work - it generates unnecessary ul inside the needed ul, which prevents other needed functionality to work

Piran Over a year ago

Which browser are you using? When I look at the generated source, I see some extra <div>s but not extra <ul>s. If you want to remove those div's, then I suggest putting the tag in comments instead.

w00t Over a year ago

I forked your plunk: plnkr.co/edit/0U9lY9yR0AQXx8q1nfrY?p=preview . It now doesn't need an ng-init on the first invocation, and it includes the template on the page itself. If the submenu was instead a set of links, it wouldn't need the ng-init, you would just do something like ng-repeat="link in link.children" overriding the parent link in the subscope.

Collectives™ on Stack Overflow

Creating multi-level lists with ng-repeat

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related