StinsonMaster StinsonMaster - 2 months ago 36
Javascript Question

Update pagination in AngularJS after filtering

I already have the pagination implemented.
Now I want the pagination to be updated after filtering my results.

The form:

<input type="text" data-ng-model="" data-ng-change="filter()"/>

The list:

<li data-ng-repeat="data in filtered = (list | filter:search) | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{}}</li>

The pagination:

<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize"></pagination>

The controller:

$scope.filter = function() {
window.setTimeout(function() { //wait for 'filtered' to be changed
$scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
}, 10);

My problem is, the pagination is just updated after clicking on a page number or after entering the next character into the input field. So it is update one step to late.

EDIT: I added the source to jsFiddle:


Use $timeout instead of window.setTimeOut. $timeout is wrapped properly to work consistently in Angular.