我有一个Rails应用程序,并且正在公开一个Angular前端要使用的API。我正在将遗嘱性 gem 用于
分页我的大型数据集。 gem期望通过参数传递:page。

页面上的按钮可以正常工作,并且可以调用nextPage或prevPage函数,但是出于某些原因,参数
页号的文件不会传递给Rails Controller 。

当用户按下下一个或上一个按钮时,我希望从Rails Controller 传递并在屏幕上刷新数据。

相关问题:Rails will_paginate gem with angular.js to do pagination

应用程序/ Controller /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

应用/ 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})

应用/ 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)

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

最佳答案

好吧,在本书的帮助下,我解决了它:https://leanpub.com/angularails

答案实际上很简单。

# 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

关于ruby-on-rails - 将参数从Angular传递到Rails,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21607004/

10-14 16:45
查看更多