Angularjs-Bootstrap分页

Question

我正在尝试使用我的angularjs代码中的Bootstrap寻呼机构建分页，但是Next按钮总是显示为禁用。当我使用常量数据运行相同的代码时，它工作正常。在控制器中，我正在获取要显示的数据从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，这将更容易帮助你。