Question

我想创建一个包含子项的项目列表。项目和子项列在数组中，如下所示：

items=[firstItem,secondItem,thirdItem,...]

和

subitems=[{"name":"firstSubitem1","name":"secondSubitem1",...},{"name":"firstSubItem2","name":"secondSubItem2"},...]

所以我设置了这个HTML代码：

<body>
    <div ng-app="" ng-init="items=[firstItem,secondItem,thirdItem,...],subitems=[{"name":"firstSubitem1","name":"secondSubitem1",...},{"name":"firstSubItem2","name":"secondSubItem2"},...]">
        <div ng-repeat="itemNames in items" id="item{{$index}}">{{itemNames}}</div>
    </div>
</body>

但是只有项目才输出列表，我想制作一个包含子项目的项目列表（ divs ）（段落）。所以我想要创建的输出是：

<body>
    <div (...) id="item0">
        firstItem
        <p>firstSubitem1</p>
        <p>secondSubitem1</p>
        <p>...</p>
    </div>

    <div (...) id="item1">
        secondItem
        <p>firstSubitem2</p>
        <p>...</p>
    </div>

    <div (...) id="item2">
        ...
    </div>
</body>

那么我怎样才能使它成为输出？

Answer 1

您需要重新构建数据，如下所示：

items = [{
    title: firstItem,
    subitems: [firstSubitem1, secondSubitem1, ...]
}, {
    title: secondItem,
    subitems: [firstSubitem2, secondSubitem2, ...]
}....]

和html如下：

<div ng-repeat="item in items" id="item.title{{$index}}">{{item.title}}
    <p ng-repeat="subitem in item.subitems">{{subitem}}</p>
</div>

Answer 2

如果您坚持使用数据结构，请使用外部循环中的$ index：

<body>
<div ng-app="" ng-init="items=[firstItem,secondItem,thirdItem,...],subitems=[{firstSubitem1,secondSubitem1,...},{firstSubItem2,secondSubItem2},...]">
    <div ng-repeat="itemNames in items" id="item{{$index}}">
        {{itemNames}}
         <p data-ng-repeat="(key, value) in subitems[$index]"> {{ value }}</p>
  </div>
</div>

如何在'ng-repeated divs'中重复孩子？

2 个答案: