javascript - AngularJS 父子循环分页

Question

我如何可能在下一页实现中循环父级和子级。我希望我的 child 位于下一页，其中包含父 div 数据的副本，我已将子项目限制设置为 5。

HTML:

<div ng-repeat="parent in parent.items track by $index">
    {{parent.data1}}
    <div ng-repeat="child in parent.child | startFrom:$index*5 | limitTo : 5">
        {{child.data1}}
    </div>
    Page {{$index}}
</div>

JavaScript:

parent.items = [];
var lineItems = item.child.length;
var totalchildpage = Math.ceil(childItems / 5);

for (var f = 1; f <= totalchildpage; f++) {
    parent.items.push(angular.copy(parent.items));
}

我希望我的结果是这样的:

<div>
 parent 1
   <div>
     child1
   <div>
   <div>
     child2
   <div>
   <div>
     child3
   <div>
   <div>
     child4
   <div>
   <div>
     child5
   <div>
Page 1
</div>

<div>
parent 1
   <div>
     child6
   <div>
Page 2
</div>

<div>
parent 2
   <div>
     child1
   <div>
Page 1
</div>

Answer 1

使用 limitTo 过滤器的可选第二个参数指定开始限制的索引:

<div ng-repeat="parent in parent.items">
    {{parent.data1}}
    ̶<̶d̶i̶v̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶c̶h̶i̶l̶d̶ ̶i̶n̶ ̶p̶a̶r̶e̶n̶t̶.̶c̶h̶i̶l̶d̶ ̶|̶ ̶s̶t̶a̶r̶t̶F̶r̶o̶m̶:̶$̶i̶n̶d̶e̶x̶*̶5̶ ̶|̶ ̶l̶i̶m̶i̶t̶T̶o̶ ̶:̶ ̶5̶"̶>̶
    <div ng-repeat="child in parent.child | limitTo : 5 : $index*5">
        {{child.data1}}
    </div>
    Page {{$index}}
</div>

欲了解更多信息，请参阅

• AngularJS limitTo Filter API Reference