нг-повтора в нг-повтора, элементы, как братья и сестры

Question

Я хочу перечислить создать список, как это с помощью angularjs:

• Родитель 1
• Group1
• Child1
• Ребенок2
• Ребенок3
• Child4
• Группа2
• Child1

• Child2

  -

• Родитель 2
• Группа1
• Child1
• Child2
• Group2
• Child1

У меня есть некоторые данные в формате, подобном этому.

$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'}] 
    }] 
}, 
... 
]; 

Я не могу понять способ петли через массив детей с угловым. В настоящее время мой HTML выглядит так.

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

В настоящее время я планирую сделать что-то вроде этого, а затем зафиксировать его с помощью CSS, но мне интересно, если есть правильный способ сделать это с угловой без того, чтобы положить списки в списки.

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

Answer 1

Я думаю, вы должны использовать ng-repeat-start и ng-repeat-end директивы, как это:

<ul ng-repeat="parent in parents" class="list-group"> 
    <li class="list-group-item bold italic">{{parent.name}}</li> 
    <li class="list-group-item bold" ng-repeat-start="group in parent.groups"> 
     {{group.name}} 
    </li> 
    <li class="list-group-item" ng-repeat="children in group.children"> 
     {{children.name}} 
    </li> 
    <li class="hide" ng-repeat-end></li> 
</ul> 

Plunkr live demo.