Rails will_paginate gem with angular.js to do pagination

Question

Context: I have a Rails backend serving as an API to an Angular.JS front-end application.

Task: I want to retrieve all of the records of different species of "dinosaurs" from the Rails backend. Since there are over 500 records, I want to only get 30 species at a time.

My current approach: I am using the will_paginate gem in my Rails index controller action for the dinosaurs_controller. I have it running like this.

def index
  @dinosaurs = Dinosaur.paginate(:page => params[:page], :per_page => 30)
end

In my Angular code:

I have a module called DinoApp and am using ngresource to create an Entry resource

app = angular.module("DinoApp", ["ngResource"])

app.factory "Entry", ["$resource", ($resource) ->
  $resource("/api/v1/dinosaurs/:id", {id: "@id"}, {update: {method: "PUT"}} )
]

My Angular controller looks like this:

@MainController = ["$scope", "Entry", ($scope, Entry) ->
  $scope.entries = Entry.query({page: 1})
  $scope.viewPost = (dinosaurId) ->
]

This line of code would hit the API at dinosaurs_controller's index action and will only return 30 species of "dinosaurs" at a time:

$scope.entries = Entry.query({page: 1})

Now - how would I get angular.js to show a next page button and append the next page to the view?

Answer 1

I created a directive for this, which might be helpful:

https://github.com/heavysixer/angular-will-paginate

Answer 2

You can use a counter for the number of pages that gets incremented each time your controller gets called.

var counter = 1;

$scope.loadPage = function() {
$scope.entries = Entry.query({page: counter})   
counter += 1 ;    
}

And have a button that refer to that next page.

<button ng-click="loadPage()">Next page</button>