AngularJS:在分页时附加url页码

时间:2016-07-20 19:04:30

标签: angularjs pagination angular-routing

我正在开发一个应用程序,我通过调用服务器来对一些记录进行分页,例如random/api/endpoint?page=1/2/3

现在,当我分页时,

我需要将我请求的页面附加到http://www.paginate.com/somedata/{1/2/3}这样的网址上,并且在打开此网址时,它还应该在视图中获取该特定页面{意味着如果我导航到hhtp://www.paginate.com/somedata/4然后应用/ view应反映来自api call random/api/endpoint?page=4}的数据。

目前我正在使用相同版本的AngularJS的angular-route 1.4.12。非常新的角度(2天),任何帮助将不胜感激。

编辑: 我想做什么?

当我在分页时点击下一步时,它应该将pageNumber附加到网址。

route.js

angular
    .module('mainRouter', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
            when('/somedata/:page', {
                templateUrl: 'partials/somedata.html',
                controller: 'PaginationCtrl',
                controllerAs: 'vm',
                reloadOnSearch: false
            }).
            otherwise( { redirectTo: "/somedata/1" });
        }
    ]);

PaginationCtrl.js

angular
        .module('controllers.Pagination', [])
        .controller('PaginationCtrl', PaginationCtrl);

    PaginationCtrl.$inject = ['$routeParams', 'paginationService'];

    function PaginationCtrl ($routeParams, paginationService) {
        var vm = this;
        vm.paginationData = {
            perPage: 10,
            currentPage: 1
        };

        vm.isLoading = false;
        vm.paginate = paginate;

        paginate(vm.paginationData.currentPage);
        calculateTotalPages();

        function calculateTotalPages () {
            paginationService.findAll(0, 0)
              .success(function (res) {
                  var paginationData = vm.paginationData || {};
                  paginationData.totalPages = Math.ceil(res.count / paginationData.perPage);
              })
              .error(function (res) {
                  console.log('Error trying to get the total number of pages', res);
              });
        }

        function paginate (pageNumber, perPage) {
            vm.isLoading = true;
            var paginationData = vm.paginationData || {};
            if (! perPage) {
                perPage = paginationData.perPage;
            }
            console.log($routeParams);
            paginationService.findAll(perPage, pageNumber)
              .success(function (res) {
                  paginationData.items = res.documents;
                  vm.isLoading = false;
              })
              .error(function (res) {
                  console.log('Error fetching more Logs', res);
              });
        }
    }

PaginationService.js

angular
        .module('services.Pagination', [])
        .service('paginationService', PaginationService);

    PaginationService.$inject = ['$http', 'Constants'];

    function PaginationService ($http, Constants) {
        // console.log($http);
        this.findAll = function (perPage, page) {
            var url = Constants.baseUrl + '/sms/get/data';
            if (page > 0) {
                url += '?page=' + page;
            }
            return $http.get(url);
        };
    }
正在使用

指令

var app = angular.module('directives.Pagination', []);

    app.directive('pagination', [function () {
        return {
            restrict: 'E',
            template: '<div class="ui pagination menu"> \
                <a class="icon item" ng-click="vm.previous()"><i class="left arrow icon"></i></a> \
                <div class="icon item">{{ vm.paginationData.currentPage }} / {{ vm.paginationData.totalPages }}</div> \
                <a class="icon item" ng-click="vm.next()"><i class="right arrow icon"></i></a> \
                </div>',
            scope: '=',
            link: function (scope, element, attrs) {
                var vm = scope.vm;
                vm.paginationData.currentPage = 1;
                vm.next = function () {
                    vm.paginationData.currentPage++;
                    if (vm.paginationData.currentPage > vm.paginationData.totalPages) {
                        vm.paginationData.currentPage = vm.paginationData.totalPages;
                    }
                    vm.paginate(vm.paginationData.currentPage);
                };

                vm.previous = function () {
                    vm.paginationData.currentPage--;
                    if (vm.paginationData.currentPage < 1) {
                        vm.paginationData.currentPage = 1;
                    }
                    vm.paginate(vm.paginationData.currentPage);
                };
            }
        };
    }]);

1 个答案:

答案 0 :(得分:0)

您应该能够通过:page访问您的$routeParams参数,该参数已经在控制器中注入了。

只需使用$routeParams.page调用paginate,而不是默认值1。

为了随时更新网址(以允许用户复制网址供以后使用的方式),无需更新路由并重新初始化控制器,您只需拨打$location.search({page: page})即可。当reloadOnSearch设置为false(正如您已经完成的那样)调用它时,它不应该重新初始化控制器。

最后,如果不清楚,您必须在进行API调用的同时更新网址。没有内置的角度方式来做到这一点,但它应该非常简单。