Friday, 23 August 2013

Looping through deep objects in ng-repeat

Looping through deep objects in ng-repeat

I'm in angular and i have a object like this.
var items = [{
title: 'Something',
children: [
{ title: 'Hello World' },
{ title: 'Hello Overflow' },
{ title: 'John Doe', children: [
{ title: 'Amazing title' },
{ title: 'Google it' },
{ title: 'I'm a child', children: [
{ title: 'Another ' },
{ title: 'He\'s my brother' },
{ title: 'She\'s my mother.', children: [
{title: 'You never know if I'm going to have children'}
]}
]}
]}
]
}];
I wan't to loop through all of these so i have something like this.
• Something
• Hello World
• Hello Overflow
• John Doe
• Amazing Title
• Google it
• I'm a child
• Another
• He's my brother
• She's my mother
• You never know if I'm going to have children
The problem is I wouldn't know how deep this object will go or what's in
it. so I wouldn't be able to do it manually. I have done a basic loop with
ng-repeat in the fiddle provided at the bottom, but i can't figure out how
I can automatically loop through these and create nested <ul>'s and
<li>'s.
What would be the best way to accomplish this?
Demo: http://jsfiddle.net/XtgLM/

No comments:

Post a Comment