Angular pagination is not updated when the linked list changes due to filtering in the input text field

Question

Here's the script:

I am using an ASP.NET MVC site with Angular JS and Boostrap UI. I have a dynamic ul list populated with data passed through a call to the AngularJS controller, which is filtered in this list through an input field. This list is also controlled by pagination (UI Bootstrap control), which I set to show 10 results per page for a list of 100 items. This list is filtered as the user enters the search field, however I would like the page to refresh as well, so consider the following example:

The list contains 10 pages of elements (100 elements), the user enters text in the search input window, which filters the list to 20 or so, so pagination should be updated from 10 pages to two pages.

I believe that somewhere there should be a $ watch setting, perhaps in the list items after it has been filtered and then refresh the number of pages in the folder, however, I'm pretty new to AngularJS, so someone can explain to me how could this do?

Thank you very much. I posted my code below:

<div data-ng-app="dealsPage"> <input type="text" data-ng-model="cityName" /> <div data-ng-controller="DestinationController"> <ul> <li data-ng-repeat="deals in destinations | filter: cityName | startFrom:currentPage*pageSize | limitTo:pageSize">{{deals.Location}}</li> </ul> <br /> <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination> </div> 

  var destApp = angular.module('dealsPage', ['ui.bootstrap', 'uiSlider']); destApp.controller('DestinationController', function ($scope, $http) { $scope.destinations = {}; $scope.currentPage = 1; $scope.pageSize = 10; $http.get('/Deals/GetDeals').success(function (data) { $scope.destinations = data; $scope.noOfPages = data.length / 10; $scope.maxSize = 5; }); }); destApp.filter('startFrom', function () { return function (input, start) { start = +start; //parse to int return input.slice(start); }; }); 

Answer 1

Since your pagination is a combination of chain filters, Angular does not know that when cityName changes, it should reset currentPage to 1. You will need to deal with it yourself with $watch .

You also want to configure your startFrom filter to say (currentPage - 1) * pageSize , otherwise you always start from page 2.

As soon as you do this, you will notice that your pagination is inaccurate because it is still based on destination.length and not on a filtered subset of destinations. To do this, you need to move the filtering logic from your view to your controller as follows:

http://jsfiddle.net/jNYfd/

HTML

 <div data-ng-app="dealsPage"> <input type="text" data-ng-model="cityName" /> <div data-ng-controller="DestinationController"> <ul> <li data-ng-repeat="deals in filteredDestinations | startFrom:(currentPage - 1)*pageSize | limitTo:pageSize">{{deals.Location}}</li> </ul> <br /> <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination> </div> 

Javascript

 var destApp = angular.module('dealsPage', ['ui.bootstrap']); destApp.controller('DestinationController', function ($scope, $http, $filter) { $scope.destinations = []; $scope.filteredDestinations = []; for (var i = 0; i < 1000; i += 1) { $scope.destinations.push({ Location: 'city ' + (i + 1) }); } $scope.pageSize = 10; $scope.maxSize = 5; $scope.$watch('cityName', function (newCityName) { $scope.currentPage = 1; $scope.filteredDestinations = $filter('filter')($scope.destinations, $scope.cityName); $scope.noOfPages = $scope.filteredDestinations.length / 10; }); }); destApp.filter('startFrom', function () { return function (input, start) { start = +start; //parse to int return input.slice(start); }; }); 

Answer 2

The jsfiddle split version is compatible with ui-bootstrap 0.5.0, but changes have been broken since 0.6.0 and above.

Here is a version that uses the following libraries:

• angular 1.2.11
• angular -ui-bootstrap 0.10.0
• bootstrap 3.1.0

Here is the plunker for the same:

angular UI pattern breakdown

Answer 3

Hello, I tried to associate this with Firebase using Angular Fire, and it only works after input type input. In the $ scope method. $ Watch I used Angular Fire orderByPriorityFilter to convert an object to an array.

 $scope.$watch('search', function(oldTerm, newTerm) { $scope.page = 1; // Use orderByPriorityFilter to convert Firebase Object into Array $scope.filtered = filterFilter(orderByPriorityFilter($scope.contacts), $scope.search); $scope.lastSearch.search = oldTerm; $scope.contactsCount = $scope.filtered.length; }); 

Bootstrap does not download any contacts. This is only after I start typing the input field.