【问题标题】:Requesting the next page of results from a web api with AngularJS使用 AngularJS 从 web api 请求结果的下一页
【发布时间】:2012-11-17 01:07:49
【问题描述】:

我正在使用一个 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"
          }
}

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

【问题讨论】:

  • 您能提供一些编码示例吗?谢谢。问题很可能出在您定义资源的方式上。

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


【解决方案1】:

类似下面的东西应该可以工作。

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 = ...
            ...
        }
    )
}

【讨论】:

  • 谢谢马克,我会试试的,让你知道它对我有用。
  • 上面的代码很有帮助。我检查 nextSet 属性是否有一个值以确定我是否可以移动到下一页,然后在单击下一步时增加我的偏移量。然后该单击操作会更新模型,并且在回调中我可以再次检查 nextSet 并根据偏移计数更新我以前的分页按钮。我的下一个和上一个按钮更新偏移量,然后调用更新模型。剩下的就是计算页数并通过 Twitter Bootstrap 将其插入到我的分页控件中。很容易。再次感谢马克。
猜你喜欢
  • 2020-07-06
  • 1970-01-01
  • 1970-01-01
  • 2016-09-22
  • 1970-01-01
  • 2017-08-11
  • 2013-06-21
  • 1970-01-01
  • 2015-09-28
相关资源
最近更新 更多