My goal is to create a structured list using angularjs:
- Parent 1
- Group1
- Child1
- Child2
- Child3
- Child4
- Group2
- Child1
- Child2
- Parent 2
- Group1
- Child1
- Child2
- Group2
- Child1
I have data organized in a similar format like this.
$scope.parents = [{
name:'Parent 1',
groups: [{
name:'Group1',
children:[{name:'Child1'},{name:'Child2'},{name:'Child3'},{name:'Child4'}]
},{
name:'Group2',
children:[{name:'Child1'},{name:'Child2'}]
}]
},{
name:'Parent 2',
groups: [{
name:'Group1',
children:[{name:'Child1'},{name:'Child2'}]
},{
name:'Group2',
children:[{name:'Child1'}]
}]
},
...
];
I am struggling to iterate through the children array using angular. My current HTML setup is as follows.
<ul ng-repeat="parent in parents">
<li class="bold italic">{{parent.name}}</li>
<li ng-repeat="group in parent.groups" class="bold">{{group.name}}</li>
</ul>
I am considering adding lists within lists and then modifying it with CSS, but I am interested to know if there is a better way to achieve this using AngularJS without nesting lists.
<ul ng-repeat="parent in parents">
<li class="bold italic">{{parent.name}}</li>
<ul ng-repeat="group in parent.groups">
<li class="bold">{{group.name}}</li>
<li ng-repeat="child in group.children">{{child.name}}</li>
</ul>
</ul>