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 。