AngularJS - ui-bootstrap分页“显示更多结果”无法正常工作

Question

我似乎无法使用我的选择下拉菜单“显示更多结果”来使用ui-bootstrap。我得到了dir-pagination而不是bootstrap。我只需要它做的是当他们从下拉列表中选择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>

现在它只显示所有结果，除非我在控制器中添加 $ scope.pageSize = 5; 。我认为它会像dir-pagination一样工作，但我显然是错的。 ：）

有一点需要指出的是，它最初只加载所有数据。单击下拉列表并选择5后，它将每页的项目更改为仅显示5.它只是显示所有数据的初始加载。我认为这与选择选项有关，该选项有ng-selected =“true”value =“5”。它没有在开始时抓住初始值

任何人都知道这是否可以通过ui-bootstraps分页？

Answer 1

做这些事，

1. 删除ng-repeat中的startFrom和limitTo。 uib-pagination会自动查看。
2. 为select
将ng-model="pageSize" ng模型设为items-per-page="pageSize"和uib-pagination ng-model的
3. uib-pagination为currentPage。请勿将其设置为pageSize。