Angular 1.x - 无法通过动态数据检索实现分页[重复]

Posted 2023-03-10

【中文标题】Angular 1.x - 无法通过动态数据检索实现分页[重复]

【英文标题】：Angular 1.x - unable to implement pagination with dynamic data retrieval [duplicate]

【发布时间】：2017-12-20 09:25:49

【问题描述】：

我正在构建一个简单的应用程序，它加载一个json 文件并将内容呈现到屏幕上，并使用户能够使用简单的分页机制滚动浏览页面。我阅读了here 并尝试使用专用服务在线托管的真实json 实现动态数据检索。数据加载正常，但出现错误：Cannot read property 'slice' of undefined。JSfiddle here

代码： html:

<div ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="item in catalogData | startFrom:currentPage*pageSize | limitTo:pageSize">
      item
    </li>
  </ul>
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
  </button>
  currentPage+1/numberOfPages()
  <button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
  </button>
</div>

控制器：

function MyCtrl($scope, dataService) 
  $scope.currentPage = 0;
  $scope.pageSize = 4;

  dataService.getData().then(function(data) 
    $scope.catalogData = data;
    $scope.numberOfPages = function() 
      return Math.ceil($scope.catalogData.length / $scope.pageSize);
    ;
  );

获取数据服务：

app.service("dataService", function($http) 
  this.getData = function() 
    return $http(
      method: 'GET',
      url: 'https://api.myjson.com/bins/llzg3',
    ).then(function(data) 
      return data.data;
    );
  ;
);

过滤器：

app.filter('startFrom', function() 
  return function(input, start) 
    start = +start; //parse to int
    return input.slice(start);
  
);

【问题讨论】：

不重复，因为它们使用静态数据数组，我从网络加载数据，因此是动态的。

您只是将一个参数传递给过滤器startFrom:currentPage*pageSize slice() 方法developer.mozilla.org/es/docs/Web/javascript/Referencia/…

【参考方案1】：

当您从服务加载数据并对其应用过滤器时，请确保您首先定义了该范围变量。因为如果您不这样做，那么在您的数据可用之前它将需要 undefined 。只需在控制器中添加以下代码行即可消除控制台上的错误。其他一切都像以前一样执行：

$scope.catalogData = [];

我已经分叉到你的 jsfiddle 版本，这里是更新的链接：http://jsfiddle.net/vrs8fv2e/1/