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>

您还可以查看此帖子Using ng-repeat and limitTo to limit the number of visible items displayed

在您的情况下，您可能应该创建一个自定义过滤器（与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-repeat中变成

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

您可以编写一个功能，点击下一个/上一个按钮会更新开始的值。

在ng-repeat中显示下一个10项？

2 个答案: