ng-repeat 位于 ng-repeat 内部，元素作为兄弟姐妹

Question

我想列出使用 angularjs 创建一个这样的列表：

• 家长 1
• 组1
• 儿童1
• 儿童2
• 儿童3
• 儿童4
• 组2
• 儿童1

• 儿童2

  -

• 家长2
• 组1
• 儿童1
• 儿童2
• 组2
• 儿童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'}]
    }]
 },
 ...
];

我无法找出用角度循环子数组的方法。我的 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 现场演示。