javascript - ng-repeat inside ng-repeat，元素作为 sibling

Question

我想使用 angularjs 创建一个像这样的列表:

• 父级 1
• 第 1 组
• child 1
• child 2
• child 3
• child 4
• 第 2 组
• child 1

• child 2

  -

• 父级 2
• 第 1 组
• child 1
• child 2
• 第 2 组
• child 1

我有一些格式与此类似的数据。

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

我想不出一种方法来循环遍历带 Angular 子数组。我的 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 修复它，但我很好奇是否有一种正确的方法可以用 angular 做这个而不必将列表放在列表中。

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