AngularJS中的承諾和分頁

Question

我有一個我要ng-repeat結束的事件列表。 我還使用UI-Bootstrap從這些事件創建分頁。 當我將事件數據硬編碼到我的控制器中時，我能夠顯示並翻轉它們沒有問題。 但是，當我嘗試使用Promise從服務中獲取數據時，我的代碼中斷了。 我有一種感覺是因為我沒有正確地寫出我的承諾（我是他們的新手），所以當頁面加載時，數據還沒有返回。

這是我的控制器：

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

而我的服務：

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

我的看法是：

<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>

最后，我嘗試返回的數據樣本：

[{"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}]

Answer 1

解決了：

原來，我需要將邏輯全部放入getEvents函數中。 所以：

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

Answer 2

這也應該達到目的：

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