在 AngularJS 应用程序中使用 Laravel API 分页答案

【问题标题】：Use Laravel API pagination in AngularJS application在 AngularJS 应用程序中使用 Laravel API 分页
【发布时间】：2014-12-15 19:15:54
【问题描述】：

我正在构建一个简单的 Laravel + AgnularJS 应用程序。最初我在 Laravel 中有一个用户资源，它从 index 方法发回所有用户。它位于：

http://todoapi.rohanchhabra.in/users

现在，我在 Laravel 中加入了分页，这意味着如果你在请求中传递了一个 GET 变量，结果会相应地改变。示例：

http://todoapi.rohanchhabra.in/users/?page=2

我的应用程序中有一条路由，我可以使用 Angular 提供的简单 $http 服务轻松获取结果。但由于分页，它只获取前 20 个结果。现在如何让我的 Angular 应用根据我传递的页码获取其他结果。

这就是我的控制器的样子。

testingControllers.controller('UsersController',function($scope, $http){
    $scope.page = "Users Page";
    $http.get('http://todoapi.rohanchhabra.in/users').success(function(data){
        $scope.users = data.data;
    });
});

【问题讨论】：

标签： angularjs laravel-4 pagination

【解决方案1】：

当分页点击时，将点击的分页号发送到作用域函数中，你的函数应该是这样的

$scope.getPaginationData = function(clickedPage) {
    var url = 'http://todoapi.rohanchhabra.in/users?page='+clickedPage;
    $scope.page = "Users Page";
    $http.get(url).success(function(data){
        $scope.users = data.data;
    });
}

您的分页类似于，当单击分页时，它将调用控制器中的getPaginationData() 函数，并将单击的页码作为参数。

<span class="pagination" ng-click="getPaginationData(1)">1</span>
<span class="pagination" ng-click="getPaginationData(2)">2</span>
<span class="pagination" ng-click="getPaginationData(3)">3</span>

【讨论】：