2014-02-06 4 views
6

Ich habe eine Rails-Anwendung und stelle eine API bereit, die von einem Angular-Frontend verwendet werden soll. Ich verwende die Willen-paginate Edelstein für mein großes Dataset paging. Der Edelstein erwartet eine : Seite über die Params übergeben werden.Parameter von Angular an Rails übergeben

Die Tasten auf der Seite arbeiten gut, und ruft die nextpage oder PrevPage Funktionen, aber aus irgendeinem Grund die params mit der Seitennummer werden an die Rails-Controller nicht bestanden werden.

Wenn der Benutzer die nächste oder vorherige Taste drückt, möchte ich, dass die Anzahl der Daten vom Schienen-Controller übermittelt und auf dem Bildschirm aktualisiert wird.

Verwandte Frage: Rails will_paginate gem with angular.js to do pagination

app/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 

app/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}) 

App/Vermögenswerte/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) 

Nach Ansicht

<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> 

Antwort

4

Nun, ich löste es, mit Hilfe dieses Buches: https://leanpub.com/angularails

Die Antwort ist eigentlich ganz war einfach.

# 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 
+1

Wenn jemand eine bessere Möglichkeit hat, dies zu tun, bitte posten Sie es, und ich werde es als die Antwort akzeptieren. – ardochhigh

+0

Was ist der ErfolgHandler? wo hast du in deinem Code definiert? Ich habe einige Rails-App heruntergeladen, wo ich die gleiche Art von und verwendet successHandler, um die Antwort des Servers, aber ich bin mir nicht sicher, wo es definiert ist – ratnakar