UI-Bootstrap分页设置不起作用(省略号,边界号等)

时间:2016-03-21 21:27:45

标签: angularjs pagination angular-ui-bootstrap

我使用plunker来测试我的一个网页,其中包括使用ui-bootstrap模式和一些分页。这一切都完美地与我的CSS和一切。但是,当我将代码移到VS 2013时,并不是分页的所有功能都有效。我非常确定这不是错误的错误,因为我为了确定而来回复制并粘贴了相同的代码。

无论如何,这是我使用的plunker。所有的CSS都完全一样。

正如您所看到的,boundary-link-numbersforce-ellipses都设置为true。

<tfoot>
  <tr>
    <td>
        <uib-pagination total-items="totalPages" items-per-page="1" ng-model="currentPage" max-size="5" class="pagination" boundary-link-numbers="true" rotate="true" force-ellipses="true"></uib-pagination>
    </td>
  </tr>
</tfoot>

这是我VS中的完全相同的代码,但由于某种原因,椭圆和边界数字不会显示出来。我能想到的主要区别在于JS的差异在于。

angular.module('accInvApp', ['ngAnimate', 'ui.bootstrap']);

angular.module('accInvApp').controller('accInvCtrl', function ($scope, $uibModal, $http) {
    $scope.today = function () {
        $scope.startDate = new Date();
        $scope.endDate = new Date();
    };
    $scope.today();

    $scope.pageOptions = {
        areBoxes: false,
        areStores: false,
        isSelection: false,
    };

    $scope.popStart = {
        opened: false,
    };

    $scope.popEnd = {
        opened: false,
    };

    $scope.openStart = function () {
        $scope.popStart.opened = true;
    };

    $scope.openEnd = function () {
        $scope.popEnd.opened = true;
    };

    $scope.selection = {
        year: null,
        boxType: null,
        storeNo: null,
    };

    $http.post('InventorySearch.aspx/PopulateYearList', { responseType: 'json' }).
    then(function (response) {
        $scope.yearList = JSON.parse(response.data.d);
    });

    $scope.selectYear = function () {
        $scope.startDate = new Date($scope.selection.year, 0, 1);
        $scope.endDate = new Date($scope.selection.year, 11, 31);

        $scope.submitDates();
    };

    $scope.submitDates = function () {
        $http.post('InventorySearch.aspx/GetBoxTypes', angular.toJson({ startDate: $scope.startDate, endDate: $scope.endDate, })).
        then(function (response) {
            $scope.boxTypes = JSON.parse(response.data.d);
            $scope.pageOptions.isSelection = true;

            if ($scope.boxTypes.length != 0) {
                $scope.pageOptions.areBoxes = true;
            }

            $scope.getPalletNo();
        });
    };

    $scope.submitType = function () {
        $http.post('InventorySearch.aspx/GetStoreNo', angular.toJson({ boxType: $scope.selection.boxType, startDate: $scope.startDate, endDate: $scope.endDate, })).
        then(function (response) {
            $scope.storeNums = JSON.parse(response.data.d);

            if ($scope.storeNums.length != 0) {
                $scope.pageOptions.areStores = true;
            }

            $scope.getPalletNo();
        });
    };

    $scope.getPalletNo = function () {
        $http.post('InventorySearch.aspx/GetPalletNo', angular.toJson({ storeNo: $scope.selection.storeNo, boxType: $scope.selection.boxType, startDate: $scope.startDate, endDate: $scope.endDate, })).
        then(function (response) {
            $scope.palletNo = response.data.d;
        });
    };

    $scope.resetPage = function () {
        $scope.selection.year = "";
        $scope.startDate = new Date();
        $scope.endDate = new Date();
        $scope.selection.boxType = "";
        $scope.selection.storeNo = "";
        $scope.pageOptions.isSelection = false;
        $scope.pageOptions.areBoxes = false;
        $scope.pageOptions.areStores = false;
    };

    $scope.submitSearch = function () {
        $http.post('InventorySearch.aspx/GetPalletData', angular.toJson({ storeNo: $scope.selection.storeNo, boxType: $scope.selection.boxType, startDate: $scope.startDate, endDate: $scope.endDate, })).
        then(function (response) {
            $scope.modalInfo = JSON.parse(response.data.d);

            var pluInstance = $uibModal.open({
                animation: true,
                templateUrl: 'accounting-file-pallet-modal.html',
                controller: 'accInvModalInstanceCtrl',
                size: 'lg',
                resolve: {
                    modalInfo: function () {
                        return $scope.modalInfo;
                    }
                }
            });
        });
    };
});

angular.module('accInvApp').controller('accInvModalInstanceCtrl', function ($scope, $uibModalInstance, modalInfo) {
    $scope.modalInfo = modalInfo;

    $scope.totalPages = $scope.modalInfo.length;
    $scope.currentPage = 1;
});

据我所知,一切都差不多。这就是为什么我不明白为什么我遇到VS的问题。

0 个答案:

没有答案