javascript - AngularJS - ui-bootstrap 分页 "show more results"不起作用

Question

我似乎无法让我的选择下拉菜单“显示更多结果”与 ui-bootstrap 一起使用。我让它与目录分页一起工作，但不能与 Bootstrap 一起工作。我只需要它做的是，当他们从下拉列表中选择 10 时，我希望它显示 10 个结果。简单吧？显然不适合我。 :()

这是我的 HTML:

// Show more results
<select ng-model="pageSize" id="pageSize" class="form-control searchShowMore">
  <option ng-selected="true" value="5">5</option>
  <option value="10">10</option>
</select>

<div ng-repeat="res in details.Results | startFrom:(currentPage - 1) * pageSize | limitTo: pageSize" class="myCar">

  <div class="carId">{{ res['Display Name'] }}</div>
  <div class="title">{{ res['Project Title'] }}</div>
  <h4><u>Amount</u></h4>
  <div class="modified">${{ res.Amount | number: 2 }}</div>
</div>

<ul uib-pagination total-items="details.Results.length" ng-model="currentPage" items-per-page="pageSize"></ul>

现在它只显示所有结果，除非我在 Controller 中添加 $scope.pageSize = 5; 。我认为它的工作原理与目录分页相同，但我显然错了。 :)

还需要指出的是，它首先只加载所有数据。单击下拉列表并选择 5 后，它会将每页的项目更改为仅显示 5 个。这只是显示所有数据的初始加载。我认为这与 ng-selected="true"value="5"的选择选项有关。它一开始就没有抓取初始值

有人知道这是否可以通过 ui-bootstraps 分页实现吗？

Answer 1

做这些事情，

1. 删除 ng-repeat 中的 startFrom 和 limitTo。 uib-pagination 会自动查看它。
2. 将 select ng-model 设置为 ng-model="pageSize" 和 items-per-page="pageSize" uib-分页
uib-pagination 的
3. ng-model 是 currentPage。不要将其设置为 pageSize。