AngularJS - ui-bootstrap分頁「顯示更多結果」不起作用

我似乎無法讓我的選擇下拉菜單「顯示更多結果」與ui-bootstrap一起使用。我得到它與dir分頁工作，但不bootstrap。我只需要它做什麼，當他們從下拉列表中選擇10我希望它顯示10個結果。簡單的權利？顯然不適合我。 :(）AngularJS - ui-bootstrap分頁「顯示更多結果」不起作用

這裏是我的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」的select選項有關。它沒有抓起初始值

任何人都知道這是可能的用ui-bootstraps分頁？

來源

2016-08-16 agon024

做這些事情，

在NG-重複刪除startFrom和limitTo。 uib-pagination會自動看到它。
設置select NG-模型ng-model="pageSize"和items-per-page="pageSize"爲uib-pagination的uib-pagination
ng-model是currentPage。不要將其設置爲pageSize。

來源

2016-08-16 21:58:10 naveen

所以我刪除了ng-repeat的startFrom和limitTo。選擇ng模型已經設置爲「pageSize」，所以我只剩下它了。我將uib-pagination的ng-model從「pageSize」更改爲「currentPage」。但它仍然只列出頁面中的所有結果。 – agon024

你有一個plunker片段？ – naveen

否。進來的數據來自API。下拉菜單起作用並改變它顯示的數量。它只是當它第一次加載顯示所有結果時，我認爲它與具有ng-selected =「true」value =「5」的選擇選項有關。它在開始時並沒有抓住初始值。 – agon024

AngularJS - ui-bootstrap分頁「顯示更多結果」不起作用

回答

相關問題