Anglejs-Bootstrap pagination

Question

Я пытаюсь построить разбиение на страницы с помощью бутстрап-пейджера в моем угловом коде, но кнопка «Далее» всегда оказывается отключенной. Когда я запускаю тот же код с постоянными данными, он работает нормально. В контроллере я извлекаю данные для отображения через API Rest, и данные возвращаются из API.

<div ng-app="manageApp"> 
    <div ng-controller="ManageCampaignController" class="bs-example"> 
     <div> 
      <div class="btn-group inline-content"> 
       <label class="btn btn-primary" ng-model="existingCampaigns.manageMode" btn-radio="'Current'">Current</label> 
       <label class="btn btn-primary" ng-model="existingCampaigns.manageMode" btn-radio="'Other'" >Other</label> 
      </div> 
     </div> 
     <div ng-show="existingCampaigns.manageMode=='Current'"> 
     {{totalItems}}{{currentPage}} 
     <pager total-items="3" ng-model="currentPage"></pager> 
     <table class="table" style="width:800px;"> 
      <thead class="row"> 
       <th class="col-md-1"> 
        Name 
       </th> 
       <th class="col-md-1"> 
        Start Date 
       </th> 
       <th class="col-md-1"> 
        End Date 
       </th> 
       <th class="col-md-1"> 
        Status 
       </th> 
       <th class="col-md-3"> 
        Actions 
       </th> 
      </thead> 
      <tbody> 
       <tr ng-repeat= "item in existingCampaigns | limitTo:1"> 
        <td> 
         {{item.name}} 
        </td> 
        <td> 
         {{item.startDate}} 
        </td> 
        <td> 
         {{item.endDate}} 
        </td> 
        <td> 
         {{item.status}} 
        </td> 
        <td> 
         <input class="btn btn-default" type="button" value="View"/> 
         <input class="btn btn-default" type="button" value="Edit"/> 
         <input class="btn btn-default" type="button" value="Pause"/> 
         <input class="btn btn-default" type="button" value="Archive"/>    
        </td> 
       </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 

</div> 


var manageApp = angular.module('manageApp',['ngAnimate', 'ui.bootstrap']); 
manageApp.controller('ManageCampaignController', function($scope, $http, $log) { 
    $scope.currentPage = 1; 
    $scope.existingCampaigns = {}; 
    $http.get('http://localhost:8080/campaign_manager/campaign').success(function (data){ 
     $log.log('data' + data); 
     $scope.existingCampaigns = data; 
     $scope.totalItems = $scope.existingCampaigns.length; 
     $log.log('totalItems' + $scope.totalItems); 
     $scope.setPage = function (pageNo) { 
      $scope.currentPage = pageNo; 
     }; 

     $scope.pageChanged = function() { 
      $log.log('Page changed to: ' + $scope.currentPage); 
     }; 

    }); 


}); 
manageApp.filter('startFrom', function() { 
    return function(input, start) { 
     if (!input || !input.length) { return; } 
     start = +start; //parse to int 
     return input.slice(start); 
    } 
}); 

Answer 1

Я не уверен, что это вам нужно, но для загрузки в пейджер вы можете использовать что-то подобное. Это может быть, лучше работать:

HTML:

<pagination page="currentPage" max-size="nbOfPages" total-items="totalItems" items-per-page="nbItemsPerPage"></pagination> 

контроллер:

$scope.currentPage = 1; 
$scope.existingCampaigns = {}; 
$http.get('http://localhost:8080/campaign_manager/campaign').success(function (data){ 
     $log.log('data' + data); 
     $scope.existingCampaigns = data; 
     //pagination 
     $scope.totalItems = $scope.existingCampaigns.length; 
     $scope.nbItemsPerPage = 2; //You can modify this value like you want 
     $scope.nbOfPages = Math.ceil($scope.totalItems/$scope.numPerPage); 

     $log.log('totalItems' + $scope.totalItems); 
     $scope.setPage = function (pageNo) { 
      $scope.currentPage = pageNo; 
     }; 

Держите меня в курсе, если это поможет вам или нет. P.S: Если вы можете, создайте plunkr, это поможет вам легче.

Answer 2

Я понял это сам. Для того, чтобы использовать свойство Bootstrap, мы использовали свойство items-per-page.

<pagination ng-model="currentPage" total-items="total" items-per-page="numPerPage"></pagination>