使用AngularJS从web api请求下一页结果

时间:2012-11-29 01:59:39

标签: twitter-bootstrap jsonp angularjs asp.net-web-api

我正在使用一个web api,它提供了为我构建的分页结果,并且一旦页面加载,我就可以通过控制器中的$ resource服务获得第一页结果。这是按预期工作的。

在使用响应元数据中的URL并将其挂钩到Twitter Bootstrap分页控件时,如何寻呼下一组结果?

以下是我得到的响应JSON的概念:

{
    "results": [
               { "some-data" },
               { "some-data" }
            ],
    "meta": {
              "totalRecords": 33,
              "pageSize":     10,
              "nextSet":      "http://api.domain.com/?action=whatever&pageSize=10&offset=10"
          }
}

我试图在我的回调中将下一个分页控件设置为meta中的URL,由于某种原因,我的控制器执行第一个获取数据的请求,然后尝试执行下一个set的请求不起作用。

1 个答案:

答案 0 :(得分:0)

以下内容应该有效。

var WebApi = $resource('http://api.domain.com/');
$scope.action   = 'initial action for first page goes here';
$scope.pageSize = 10;
$scope.offset   = 0;
$scope.loadPage = function() {
    var serverData = WebApi.get( 
        {action: $scope.action, pageSize: $scope.pageSize, offset: $scope.offset}, 
        // calls http://api.domain.com/?action=<action>&pageSize=<pageSize>&offset=<offset>
        function() {
            // page data is in serverData.results
            $scope.model = serverData.results;
            // update $scope properties for next page: action, pageSize, offset
            $scope.action = ...
            ...
        }
    )
}