gpt4 book ai didi

javascript - Angular 1.x - 无法通过动态数据检索实现分页

转载 作者:行者123 更新时间:2023-11-29 23:41:33 24 4
gpt4 key购买 nike

<分区>

我正在构建一个简单的应用程序,它加载一个 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>

Controller :

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);
}
});

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com