【问题标题】:Limit and Offset data results in AngularJS for Pagination限制和偏移数据导致 AngularJS 用于分页
【发布时间】:2023-03-03 10:22:01
【问题描述】:

AngularJS 在调用支持它们的外部数据资源时是否有限制和偏移请求方法?

我想有一个比这更优雅的解决方案,我通过 routeParams 超过限制和偏移:

function ListCtrl($scope, $http, $routeParams) {
$http.jsonp('http://www.example.com/api/list.jsonp?callback=JSON_CALLBACK&limit=' + $routeParams.limit + '&offset=' + $routeParams.offset,{callback: 'JSON_CALLBACK'}).success(function(data) {
$scope.list = data;
  });
}

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    一个完整的分页解决方案是:(1) 与服务器/数据库通信的服务,(2) 处理 next/prev 的指令,以及 (3) 将它们粘合在一起的控制器。

    一旦你有了指令和服务,你的控制器就这么简单:

    app.controller('MainCtrl', function($scope, myData) {
      $scope.numPerPage = 5;
      $scope.noOfPages = Math.ceil(myData.count() / $scope.numPerPage);
      $scope.currentPage = 1;
    
      $scope.setPage = function () {
        $scope.data = myData.get( ($scope.currentPage - 1) * $scope.numPerPage, $scope.numPerPage );
      };
    
      $scope.$watch( 'currentPage', $scope.setPage );
    });
    

    同样简单的 HTML:

    <body ng-controller="MainCtrl">
      <ul>
        <li ng-repeat="item in data">{{item.name}}</li>
      </ul>
      <pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small"></pagination>
    </body>
    

    这是一个完整的 Plunker:http://plnkr.co/edit/Mg0USx?p=preview。它使用ui-bootstrap 的分页指令,这是一项正在进行的工作。

    【讨论】:

    • 如果 API 返回像 {"data":[],"total":1000} 这样的 smt 并且您想使用 ui-boostrap 分页,那么您必须使用 $promise 否则 watch 函数会被触发两次(这是我的理解)。我做了这个plnkr.co/edit/UFKtDXY8dWXEsczoankc,如果您在app.js 中注释代码启用get() 并禁用get().$promise,您将看到该函数如何被调用两次,并且页面将始终为1。 (列表没有变化,因为是伪造的,看页码就行了)
    • $promise$resource 的一个功能,我的回答和问题都没有假设它在使用中。
    • 是的,只是我遇到了这个问题,为什么要搜索使用$resource的解决方案..
    【解决方案2】:

    我不确定我是否理解您的问题,但 $http 方法有一个 config 参数,它是一个对象,其中一个属性是“params”对象:

    params – {Object.} – 字符串或对象的映射,将在 url 之后变为
    ?key1=value1&amp;key2=value2。如果该值不是字符串,它将被 JSON 化。

    如果您的“限制”和“偏移”值在 $routParams 中,那么这似乎是获取它们的好地方。但是,您可能需要考虑将与您的服务器接口的代码包装到 Angular 服务中。该服务可以存储当前限制和偏移值。您可以将服务注入您的控制器,以访问服务提供的功能(和/或数据)。

    【讨论】:

    • 感谢您提供的信息,这对您有所帮助。为了澄清,我试图找到最优雅的方式来对来自远程资源的大量数据执行分页。因此,当用户加载页面时,会显示 10 个结果,当他们单击下一步时,会从资源服务器中再提取 10 个结果。
    • 看看这是否有帮助:stackoverflow.com/questions/10816073/…
    【解决方案3】:

    AngularJs 是客户端。应该支持这些参数的是外部数据资源的提供者。

    您的问题可能的解决方案是$resource(或params option Mark mentioned):

    var UserAccounts = $resource('/useraccounts/:userId/limit/:limit/offset:offset', {userId:'@id'});
    var accounts = User.get({userId:123, limit:10, offset:10}, function() {
    });
    

    当然,服务器端需要以不同的方式读取参数。

    【讨论】:

    • 感谢您的回复。我将澄清我的问题,以便清楚地表明我要求最好的方法是有角度地要求限制/偏移结果。资源提供者确实支持它们。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-07
    • 2014-09-20
    • 2014-08-26
    相关资源
    最近更新 更多