1

上下文：我有一个 Rails 后端，用作 Angular.JS 前端应用程序的 API。

任务：我想从 Rails 后端检索不同种类的“恐龙”的所有记录。由于有超过 500 条记录，我想一次只获取 30 种。

我目前的方法：我在我的 Rails 索引控制器操作中为恐龙控制器使用 will_paginate gem。我让它像这样运行。

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

在我的 Angular 代码中：

我有一个名为 DinoApp 的模块，并且正在使用 ngresource 创建一个 Entry 资源

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

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

我的 Angular 控制器如下所示：

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

这行代码会在恐龙控制器的 index 操作中命中 API，并且一次只会返回 30 种“恐龙”：

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

现在 - 我如何让 angular.js 显示下一页按钮并将下一页附加到视图中？

4

2 回答 2

4

我为此创建了一个指令，这可能会有所帮助：

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

于 2013-12-17T19:53:16.343 回答
1

您可以使用计数器来计算每次调用控制器时递增的页数。

var counter = 1;

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

并有一个指向下一页的按钮。

<button ng-click="loadPage()">Next page</button>
于 2014-02-24T01:58:03.270 回答