{{numPages}不按分页指令计算

Question

我对分页指令的印象是，{{numPages}}值将由该指令计算。它什么都没还给我。

有什么东西我错过了让它正常工作吗？如果指令是为我做的话，我不想计算它。否则，分页工作得很好。

<pagination 
            total-items="totalItems" 
            ng-model="currentPage" 
            max-size="maxSize" 
            items-per-page="itemsPerPage" 
            class="pagination-sm" 
            boundary-links="true" rotate="false">
     </pagination>
    <table class="table table-striped">         
        <tr>
            <td     style="width:150px;">GPT ID</td>
            <td     style="width:250px;">Therapy Area</td>
            <td     style="width:450px;">GPT Description</td>           
            <td     style="width:150px;">Actions</td>           
        </tr>
        <tr ng-repeat="prGpt in prGpts | orderBy:['therapyArea.therapyArea','gptDesc'] | startFrom:(currentPage -1) * itemsPerPage | limitTo: itemsPerPage">        
            <td>{{prGpt.id}}</td>           
            <td>
                <span ng-if="!prGpt.editMode">{{prGpt.therapyArea.therapyArea}}</span>                  
                <span ng-if="prGpt.editMode && !createMode">
                    <select class="form-control" style="width:150px;" ng-model="selectedGpt.therapyArea" ng-options="item as item.therapyArea for item in therapyAreas"/>
                </span>
            </td>
            <td>
                <span ng-if="!prGpt.editMode">{{prGpt.gptDesc}}</span>
                <span ng-if="prGpt.editMode && !createMode"><input class="form-control" type="text" style="width:400px;" ng-model="selectedGpt.gptDesc" /></span>
            </td>
            <td>
                <span ng-if="!prGpt.editMode" class="glyphicon glyphicon-pencil" ng-click="copySelectedGpt(prGpt);beginEditGpt()"/>
                <span ng-if="prGpt.editMode  && !createMode" class="glyphicon glyphicon-floppy-disk" ng-click="saveEditGpt()"/>
                <span ng-if="prGpt.editMode  && !createMode" class="glyphicon glyphicon-thumbs-down" ng-click="cancelEditGpt()"/>
                <span ng-if="!prGpt.editMode  && !createMode" class="glyphicon glyphicon-remove-circle" ng-click="copySelectedGpt(prGpt);openDeleteDialog()"/>
                <span><a ng-href="#!pr/gptProjects/{{prGpt.id}}">Edit Projects</a>                  
            </span>                         
        </tr>
    </table> 
    <br/>      
       <pre>Page: {{currentPage}} / {{numPages}}</pre>
    </div> 

主计长：

 // GPT List Controller  
     .controller('prGPTCtrl',['$scope', '$modal', '$dialog', 'Restangular', 'prTAService', 'prGPTService', function($scope, $modal, $dialog, Restangular, prTAService, prGPTService) {

          // window.alert('prGPTCtrl');
            $scope.prGpts = {};
            $scope.therapyAreas = {};
            $scope.createMode = false;
            $scope.selectedGpt = {};
            $scope.newGpt = {};

            // pagination
            $scope.currentPage = 1;
            $scope.itemsPerPage = 10;
            $scope.maxSize = 20;
            $scope.totalItems = $scope.prGpts.length;           

            Restangular.setBaseUrl('resources/pr');

            //call the TA service to get the TA list for the drop down lists
            //and then get the gpt list once successful
            prTAService.getTAs().then(function(tas) {
                $scope.therapyAreas = tas;
                prGPTService.getGPTs().then(function(gpts) {
                    //window.alert('prGPTCtrl:getGPTs');
                    $scope.prGpts = gpts;
                });
            });

            $scope.$watch('prGpts.length', function(){              
                $scope.totalItems = $scope.prGpts.length;
             });              


            /*
             * Take a copy of the selected GPT to copy in
             */         
            $scope.copySelectedGpt = function(prGpt) {
                $scope.selectedGpt = Restangular.copy(prGpt);
            };

            $scope.beginEditGpt = function() {
                var gpt = {};
                var ta = {};

                var gpt;
                for(var i = 0; i < $scope.prGpts.length;i++) {
                    gpt = $scope.prGpts[i];
                    gpt.editMode = false;
                }

                var index = _.findIndex($scope.prGpts, function(b) {
                    return b.id === $scope.selectedGpt.id;
                });

                gpt = $scope.prGpts[index];
                gpt.editMode = true;

                var taIndex = _.findIndex($scope.therapyAreas, function(b) {
                    return b.id === $scope.selectedGpt.therapyArea.id;
                });

                ta = $scope.therapyAreas[taIndex];

                $scope.selectedGpt.therapyArea = ta;

                $scope.createMode = false;

            };


            $scope.cancelEditGpt = function() {
                var gpt;
                for(var i = 0; i < $scope.prGpts.length;i++) {
                    gpt = $scope.prGpts[i];
                    gpt.editMode = false;
                }

                var index = _.findIndex($scope.prGpts, function(b) {
                    return b.id === $scope.selectedGpt.id;
                });

                $scope.selectedGpt = null;
                $scope.prGpts[index].editMode = false;  
            };




            $scope.saveEditGpt = function() {
                $scope.selectedGpt.save().then(function (gpt) {
                    // find the index in the array which corresponds to the current copy being edited
                    var index = _.findIndex($scope.prGpts, function(b) {
                        return b.id === $scope.selectedGpt.id;
                    });

                    $scope.prGpts[index] = $scope.selectedGpt;
                    $scope.prGpts[index].editMode = false;  
                    $scope.selectedGpt = null;

                },
                function(err) {
                    window.alert('Error occured: ' + err);
                }
                );
            };

            // create a new GPT
            $scope.createGpt = function() {
                $scope.createMode = true;
                var gpt;
                for(var i = 0; i < $scope.prGpts.length;i++) {
                    gpt = $scope.prGpts[i];
                    gpt.editMode = false;
                }
            };

            $scope.saveNewGpt  = function() {
                Restangular.all('/gpt/gpts').post($scope.newGpt).then(function(gpt) {
                     $scope.newGpt = {};
                     $scope.prGpts.push(gpt);
                     $scope.createMode = false;
                    // window.alert('created new GPT ' + gpt.gptDesc + ' with id ' + gpt.id);
                });
            };


            $scope.openDeleteDialog = function() {
                var title = "Please confirm deletion of GPT " + $scope.selectedGpt.gptDesc;
                var msg = "<b>Delete GPT? Please confirm...</b>";
                var btns = [{result:'CANCEL', label: 'Cancel'},
                            {result:'OK', label: 'OK', cssClass: 'btn-primary'}];

                $dialog.messageBox(title, msg, btns, function(result) {
                      if (result === 'OK') {
                        $scope.deleteGpt();
                      }
                });
            };

            $scope.deleteGpt = function()  {
                $scope.selectedGpt.remove().then(function() {
                    $scope.prGpts = _.without($scope.prGpts, _.findWhere($scope.prGpts, {id: $scope.selectedGpt.id}));
                    $scope.selectedGpt = null;
                },
                function() {
                    window.alert("There was an issue trying to delete GPT " + $scope.selectedGpt.gptDesc);
                }
                );
            };


     }]);

我有一个startFrom过滤器。

.filter('startFrom', function () {
            return function (input, start) {

                if (input === undefined || input === null || input.length === 0
                 || start === undefined || start === null || start.length === 0 || start === NaN) return [];
                start = +start; //parse to int

                try {
                    var result = input.slice(start);
                    return result;

                } catch (e) {

                //    alert(input);
                }        
            };
        })  

问候

我

Answer 1

看起来你只是在你的num-pages="numPages"标签上丢失了<pagination>。本质上，您必须向pagination提供一个变量，以返回页面数。这是通过num-pages完成的

<pagination 
            num-pages="numPages" <!-- Add this here -->
            total-items="totalItems" 
            ng-model="currentPage" 
            max-size="maxSize" 
            items-per-page="itemsPerPage" 
            class="pagination-sm" 
            boundary-links="true" rotate="false">
</pagination>