AngularJS - ui-bootstrap pagination "show more results" not working

Question

I cant seem to get my select drop down "show more results" to work with ui-bootstrap. I got it working with dir-pagination but not bootstrap. What I simply need it to do is when they select 10 from the dropdown I want it to display ten results. Simple right? Not for me apparently. :()

Here is my 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>

Right now it just displays all the results unless I add $scope.pageSize = 5; in the controller. I figured that it would would work the same as dir-pagination but I'm obviously wrong. :)

One thing to point out also is that it only loads all the data at first. Once I click the dropdown and select 5 it changes the items per page to only show 5. It is just the initial load where it shows all the data. I think it has something to do with the select option that has ng-selected="true" value="5". Its not grabbing the initial value at the beginning

Anyone know if this is possible with ui-bootstraps pagination?

codeandcloud · Accepted Answer · 2016-08-16 21:58:10Z

1

Do these things,

Remove startFrom and limitTo in the ng-repeat. uib-pagination will automatically see to it.
Set the select ng-model as ng-model="pageSize" and items-per-page="pageSize" for theuib-pagination
ng-model of uib-pagination is currentPage. Do not set it to pageSize.

answered Aug 16, 2016 at 21:58

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

agon024 Over a year ago

So I removed the startFrom and limitTo from the ng-repeat. The select ng-model was already set to "pageSize" so I left that alone. I changed the uib-pagination's ng-model from "pageSize" to "currentPage". But it still just list all the results down the page.

codeandcloud Over a year ago

do you have a plunker snippet?

agon024 Over a year ago

No. The data coming in is coming from an API. The dropdown works and changes how many that it shows. Its just that when it first loads its showing all the results so I'm thinking it has something to do with the select option that has ng-selected="true" value="5". Its not grabbing the initial value at the beginning.

Collectives™ on Stack Overflow

AngularJS - ui-bootstrap pagination "show more results" not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related