[英]Promises and pagination in AngularJS
I have a list of events that I'm trying to ng-repeat over. 我有一个我要ng-repeat结束的事件列表。 I'm also using UI-Bootstrap to create pagination off of those events.
我还使用UI-Bootstrap从这些事件创建分页。 When I hard code that event data into my controller, I am able to display and flip through them no problem.
当我将事件数据硬编码到我的控制器中时,我能够显示并翻转它们没有问题。 However, when I try to grab that data from a service using promises, my code breaks.
但是,当我尝试使用Promise从服务中获取数据时,我的代码中断了。 I have a feeling it's because I'm not writing my promise correctly (I'm new at them) so when the page loads that data hasn't yet been returned yet.
我有一种感觉是因为我没有正确地写出我的承诺(我是他们的新手),所以当页面加载时,数据还没有返回。
Here is my controller: 这是我的控制器:
App.controller("EventsController", ['$scope', 'EventsService', function($scope, EventsService) {
$scope.events = [];
$scope.itemsPerPage = 5; //items to show per page
$scope.currentPage = 1; //what page to start on
EventsService.getEvents()
.then(function(data) {
$scope.events = data;
}, function(error) {
console.log(error);
});
$scope.totalItems = $scope.events.length;
//determines total # of pages
$scope.pageCount = function () {
return Math.ceil($scope.events.length / $scope.itemsPerPage);
};
$scope.$watch('currentPage + itemsPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredEvents = $scope.events.slice(begin, end);
});
}]);
And my service: 而我的服务:
App.factory("EventsService", function($http) {
return {
getEvents : function() {
return $http.get("/../../../test_event_data.json")
.then(function(response) {
if(typeof response.data === 'object') {
return response.data;
} else {
return $q.reject(response.data);
}
}, function(response) {
return $q.reject(response.data);
});
}
}
});
And my view: 我的看法是:
<div class="row">
<div class="col-lg-2">
<h3>Filter Results</h3>
<h3 class="pull-right">All</h3>
<h3 class="pull-right">Events</h3>
<h3 class="pull-right">Offerings</h3>
</div>
<div class="col-lg-10">
<h3>Upcoming Events&Offerings</h3>
<div ng-repeat="event in filteredEvents">
<h3>{{event.title}}</h3>
<p>{{event.location}}</p>
<p>{{event.time}}</p>
<p>{{event.description}}</p>
</div>
<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
</div>
</div>
Finally, a sample of the data I'm trying to return: 最后,我尝试返回的数据样本:
[{"id":1,"title":"massa quis augue luctus tincidunt nulla","location":"Little Fleur","time":"8:33 AM","description":"rhoncus mauris enim leo rhoncus sed vestibulum sit amet cursus id","offering":true},
{"id":2,"title":"sapien ut nunc vestibulum ante","location":"Leroy","time":"6:07 PM","description":"vestibulum proin eu mi nulla ac enim in tempor turpis nec euismod scelerisque quam turpis adipiscing lorem vitae","offering":false},
{"id":3,"title":"sagittis nam congue risus semper porta volutpat","location":"Waubesa","time":"4:13 AM","description":"nisi at nibh in hac habitasse platea dictumst aliquam augue","offering":false},
{"id":4,"title":"consequat ut nulla sed","location":"Dahle","time":"2:08 AM","description":"ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus","offering":false}]
Solved it: 解决了:
Turns out I needed to put the logic all inside of the getEvents function. 原来,我需要将逻辑全部放入getEvents函数中。 So:
所以:
EventsService.getEvents()
.then(function(data) {
$scope.events = data;
$scope.pageCount = function () {
return Math.ceil($scope.events.length / $scope.itemsPerPage);
};
$scope.totalItems = $scope.events.length;
$scope.$watch('currentPage + itemsPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredEvents = $scope.events.slice(begin, end);
});
}, function(error) {
console.log(error);
});
This should also do the trick: 这也应该达到目的:
App.controller("EventsController", ['$scope', 'EventsService', function($scope, EventsService) {
$scope.events = [];
$scope.itemsPerPage = 5; //items to show per page
$scope.currentPage = 1; //what page to start on
EventsService.getEvents()
.then(function(data) {
angular.forEach(data, function(value){
$scope.events.push(value);
});
}, function(error) {
console.log(error);
});
$scope.pageCount = function () {
return Math.ceil($scope.events.length / $scope.itemsPerPage);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.