Pagination on a list using ng-repeat

Question

I'm trying to add pages to my list. I followed the AngularJS tutorial, the one about smartphones and I'm trying to display only certain number of objects. Here is my html file:

  <div class='container-fluid'>     <div class='row-fluid'>         <div class='span2'>             Search: <input ng-model='searchBar'>             Sort by:              <select ng-model='orderProp'>                 <option value='name'>Alphabetical</option>                 <option value='age'>Newest</option>             </select>             You selected the phones to be ordered by: {{orderProp}}         </div>          <div class='span10'>           <select ng-model='limit'>             <option value='5'>Show 5 per page</option>             <option value='10'>Show 10 per page</option>             <option value='15'>Show 15 per page</option>             <option value='20'>Show 20 per page</option>           </select>           <ul class='phones'>             <li class='thumbnail' ng-repeat='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit'>                 <a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>                 <a href='#/phones/{{phone.id}}'>{{phone.name}}</a>                 <p>{{phone.snippet}}</p>             </li>           </ul>         </div>     </div>   </div> 

I've added a select tag with some values in order to limit the number of items that will be displayed. What I want now is to add the pagination to display the next 5, 10, etc.

I have a controller that works with this:

function PhoneListCtrl($scope, Phone){     $scope.phones = Phone.query();     $scope.orderProp = 'age';     $scope.limit = 5; } 

And also I have a module in order to retrieve the data from the json files.

angular.module('phonecatServices', ['ngResource']).     factory('Phone', function($resource){         return $resource('phones/:phoneId.json', {}, {             query: {method: 'GET', params:{phoneId:'phones'}, isArray:true}         });     }); 

Answer 1

If you have not too much data, you can definitely do pagination by just storing all the data in the browser and filtering what's visible at a certain time.

Here's a simple pagination example: http://jsfiddle.net/2ZzZB/56/

That example was on the list of fiddles on the angular.js github wiki, which should be helpful: https://github.com/angular/angular.js/wiki/JsFiddle-Examples

EDIT: http://jsfiddle.net/2ZzZB/16/ to http://jsfiddle.net/2ZzZB/56/ (won't show "1/4.5" if there is 45 results)