Rails will_paginate與angular.js gem做分頁

上下文：我有一個Rails後端作爲Angular.JS前端應用程序的API。Rails will_paginate與angular.js gem做分頁

任務：我想從Rails後端檢索不同種類的「恐龍」的所有記錄。由於有超過500條記錄，我一次只能得到30種。

我目前的做法：我在我的Rails索引控制器操作中爲dinosaurs_controller使用了will_paginate gem。我有這樣的運行。

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

在我的角度代碼：

我有一個名爲DinoApp模塊和正在使用ngresource創建條目資源

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

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

我的角度控制器看起來是這樣的：

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

這行代碼會在dinosaurs_controller的索引操作中觸發API，並且只返回30同時「恐龍」的品種：

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

現在 - 我怎麼才能angular.js顯示下一頁按鈕和下一頁追加到視圖？

來源

2013-10-08 Hung Luu

你能解決嗎？ –

任何使用angular-will-paginate gem發佈完整解決方案的機會？ – ardochhigh

不，我無法解決它，但看到下面的heavysixer的指示。希望他可以發佈一個例子 –

我創建了這個指令，這可能會有所幫助：

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

來源

2013-12-17 19:53:16 heavysixer

感謝寶石 - 我只是遇到了幾個問題：實際上需要配置前一個和下一個選項（不是可選的），我有一點點困難讓模板從緩存加載 - 它couldn找不到路徑 - 但我能夠讓它工作，併爲我節省了一堆時間。謝謝！ – xdotcommer

酷感謝您的反饋，我會看看配置對象，並確保prev/next是真正可選的。 – heavysixer

寶石看起來不錯。任何使用Rails/Angular示例代碼的機會？ – ardochhigh

您可以使用一個計數器，可推動每個控制器被調用時增加頁數。

var counter = 1; 

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

並且有一個指向下一頁的按鈕。

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

來源

2014-02-24 01:58:03 ogm

Rails will_paginate與angular.js gem做分頁

回答

相關問題