Passing parameters from Angular to Rails

Question

I have a Rails application and expose an API that will be used by the Angular interface. I use the pearl of the will to paging my large data set. Pearl expects: the page will be passed through the parameters.

The buttons on the page work fine and call the nextPage or prevPage functions, but for some reason the page number parameters are not passed to the Rails controller.

When the user clicks on the next or previous buttons, I want to have a pag of data delivered from the rail controller and updated on the screen.

Related question: Rails will_paginate gem with angular.js do pagination

application / controllers / API / data_sources_controller.rb

class Api::DataSourcesController < Api::BaseController def index Rails.logger.debug("index: datasources, page: #{params[:page]}") render json: Cosmic.paginate(:page => params[:page], :per_page => 50) end end 

applications / assets / javascripts / controllers / DatasetController.js.coffee

 angular.module('assaypipelineApp').controller "DatasetController", ($scope, $routeParams, $location, DataSet) -> $scope.currentPage = 1 $scope.init = -> @panel_id = $routeParams.panel_id console.log("dataset init: #{@panel_id}") @datasetsService = new DataSet(serverErrorHandler) $scope.datasets = @datasetsService.all({page: $scope.currentPage}) # pagination $scope.prevPage = -> console.log("prev #{$scope.currentPage}") $scope.currentPage-- if $scope.currentPage > 0 $scope.datasets = @datasetsService.all({page: $scope.currentPage}) $scope.nextPage = -> console.log('next') $scope.currentPage++ $scope.datasets = @datasetsService.all({page: $scope.currentPage}) 

application / assets / JavaScripts / services / DataSetService.js.coffee

 angular.module('assaypipelineApp').factory 'DataSet', ($resource, $http) -> class DataSet constructor: (errorHandler) -> console.log('dataset constructor') @service = $resource('/api/data_sources/:id', {id: '@id'}, {update: {method: 'PATCH'}}) @errorHandler = errorHandler # Fix needed for the PATCH method to use application/json content type. defaults = $http.defaults.headers defaults.patch = defaults.patch || {} defaults.patch['Content-Type'] = 'application/json' all: -> @service.query((-> null), @errorHandler) find: (id, successHandler) -> @service.get(id: id, ((data_set)-> successHandler?(data_set) data_set), @errorHandler) 

In view

 <ul class="pagination pull-right"> page {{currentPage}} <li ng-class="{disabled: currentPage == 0}"> <a href ng-click="prevPage()">« Prev</a> </li> <li ng-repeat="n in range(pagedItems.length)" ng-class="{active: n == currentPage}" ng-click="setPage()"> <a href ng-bind="n + 1">1</a> </li> <li ng-class="{disabled: currentPage == pagedItems.length - 1}"> <a href ng-click="nextPage()">Next »</a> </li> </ul> 

Answer 1

Ok, I solved this with this book: https://leanpub.com/angularails

The answer was pretty simple.

 # pagination $scope.setPage = (newPage) -> newPage = 1 if newPage < 1 $scope.currentPage = newPage $scope.getPage() $scope.getPage = () -> http = method: "GET" url: "/api/data_sources" params: page: $scope.currentPage $http(http) .success (response) -> console.log(response) $scope.datasets = response