在 ng-repeat中显示接下来的 10 个项目?

Question

我必须显示列表中的项目(可以有 100 个项目或 20 个项目(，我想将它们限制为每页 10 个。我该怎么做？

这是我的代码(我有一些拖放，忽略它(

<div class="unallocated-box" style="top:10px;" 
ng-repeat="item in list2 | orderBy : 'title'" data-drop="true" ng-model='list2'
jqyoui-droppable="{index: {{$index}}, applyFilter: 'filterIt'}" 
ng-show="item.FirstName">
<div data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list2"
jqyoui-draggable="{index: {{$index}},animate:true, applyFilter: 'filterIt'}"
class="seat unallocated-seat">
<div class="sitting-student">{{ item.FirstName }}</div>
</div>
</div>

这是我要限制的 ng-repeat：ng-repeat="list2 中的项目

如果有人有建议，提前感谢！

Answer 1

您可以使用limitTo，也可以在AngularJS中创建自己的过滤器。要创建自定义过滤器以限制列表大小，请参阅 https://docs.angularjs.org/api/ng/filter/filter

<label>
Limit {{numbers}} to:
<input type="number" step="1" ng-model="numLimit">
</label>
<p>Output numbers: {{ numbers | limitTo:numLimit }}</p>

您还可以检查此线程 使用 ng-repeat 和 limitTo 来限制显示的可见项目数

在您的情况下，也许您应该创建一个自定义过滤器(与limitTo类似(，该过滤器将页码作为输出，然后将列表限制为根据页面的项目数

<label>
Limit {{numbers}} to:
<input type="number" step="1" ng-model="numLimit">
<input type="number" step="1" ng-model="pageNumber">
</label>
<p>Output numbers: {{ numbers | limitTo:numLimit:pageNumber }}</p>

自定义筛选器将使用numLimit * (pageNumber - 1)作为起始索引，并将返回新的大小列表numLimit

Answer 2

使用角度过滤器，语法：

limitTo : limit : begin 

所以你的代码是这样的， 假设您有变量$scope.limit=10 and $scope.begin=1;然后在你的ng重复中，它变成了

item in list2 |  limitTo : limit : begin | orderBy : 'title'"

您可以编写一个函数，单击">下一步/上一个"按钮更新"开始"的值。