Question

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

家长1
的组别1
Child1
CHILD2
Child3
Child4
的第2组
Child1
CHILD2

-
家长2
的组别1
Child1
CHILD2
的第2组
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'}]
    }]
 },
 ...
];

我无法找到一种用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修复它，但我很好奇是否有一个正确的方法来执行此角度而不必将列表放在列表中。

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

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

1 个答案: