Question

我有一个数据模型，它是一个有一些对象的数组。这些对象可能包含一些子对象。所以如何在一个ng-repeat属性中对这两个对象运行ng-repeat。这是一个考试JSON

[
    {
        "foo": "bar",
        "values": null,
        "children": [
            {
                "foo": "bar",
                "values": null,
                "children": null
            }
        ]
    },
    {
        "foo": "bar",
        "children": [
            {
                "id": 1,
                "ques": "something"
            }
        ]
    }
]

Answer 1

例如：

<div ng-repeat="object in objects">
  <div ng-repeat="child in object">
    {{child}}
  </div>
</div>

其中，对象是您从http请求接收的主要对象，而child是对象中的子对象。你可以像对象中的孩子一样深入到孩子的对象中。

在你的情况下：

<div ng-repeat="object in objects">
   {{object.foo}} {{object.values}}
  <div ng-repeat="child in object">
    {{child.id}} {{child.ques}}
  </div>
</div>

Answer 2

使用首选的集合操作库将其转换为子节点数组。

例如，lodash：_.flatten(_.pluck(yourArray, 'children')) （我认为这也是一个链接版本？）

然后正常迭代它。

可以在控制器中完成操作，以在范围上设置变量，或者在范围上定义函数，或者在html中内联完成。

Answer 3

也许您正在寻找具有ng-include的模板。这是带有您给定数据的Plunker example。

Answer 4

您将需要使用ng-repeat-start和ng-repeat-end。

ng-repeat-start与ng-repeat相同，但是它允许我们将标签输出到ng-repeat-end，而不必是ng-repeat-start的子标签。然后，您可以根据需要访问ng-repeat-start标记之外的子代。

通过您的示例，您可以执行以下操作……

            <tbody>
                <tr ng-repeat-start="parent in parents track by $index">
                    <td>Parent</td>
                    <td>{{parent.foo}}</td>
                </tr>
                <tr ng-repeat-end ng-repeat="child in parent.children track by $index">
                    <td>Child</td>
                    <td>{{child.foo}}</td>
                </tr>
            </tbody>

子对象上的角度ng-repeat

4 个答案: