AngularJS-ui-bootstrap分页“显示更多结果”不起作用

Question

我似乎无法选择下拉菜单“显示更多结果”来使用ui-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，否则它只会显示所有结果。 在控制器中。 我认为它的作用与目录分页相同，但我显然错了。 :)

要指出的一件事是，它首先只加载所有数据。 单击下拉列表并选择5后，它会将每页的项目更改为仅显示5。这只是初始加载，其中显示了所有数据。 我认为这与ng-selected =“ true” value =“ 5”的select选项有关。 一开始没有抓住初始值

有人知道使用ui-bootstraps分页是否可行？

Answer 1

做这些事

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