javascript - Angular JS 嵌套 ngRepeat 循环如何在 maxRows 超过限制后中断？

Question

我将以下 json 结构存储在 resultData 中:

{
    "ParentObjects": [
        {
            "objId": "A1",
            "ChildObjects": [
                {
                    "description": "child object1"
                },
                {
                    "description": "child object2"
                }
            ]
        },
        {
            "objId": "A2",
            "ChildObjects": [
                {
                    "description": "child object3"
                },
                {
                    "description": "child object4"
                },
                {
                    "description": "child object5"
                }
            ]
        },
        {
            "objId": "A3",
            "ChildObjects": [
                {
                    "description": "child object6"
                },
                {
                    "description": "child object7"
                }
            ]
        }
    ]
}

我的 html 中有 2 个 ng-repeat，如下所示:

<table>
	<tbody ng-repeat="parentObj in resultData">
	  <tr ng-repeat="childObj in parentObj.ChildObjects">
		<td>{{childObj.description}}</td>
	  </tr>
	</tbody>
</table>

我想将显示的 数量限制为 4，无论其中的父级和子级数量有多少。我知道 limitTo 但它仅适用于内部循环，并且不会考虑早期父对象先前渲染的行。

是否可以考虑/计算所有子对象来限制行？

Answer 1

你可以在ng-repeat中使用limitTo进行限制

<table>
	<tbody ng-repeat="parentObj in resultData | limitTo:4">
	  <tr ng-repeat="childObj in parentObj.ChildObjects ">
		<td>{{childObj.description}}</td>
	  </tr>
	</tbody>
</table>