带有启动过滤器的AngularJS ng-repeat和限制在分页

时间:2015-12-02 04:20:31

标签: javascript angularjs pagination

我正在努力实现Google的搜索引擎等分页概念。从我目前的代码来看,除了分页的编号外,一切正常。

我想要达到的目标是限制为5.例如:

< | 1 | 2 | 3 | 4 | 5 | >

< | 4 | 5 | 6 | 7 | 8 | >

截至上述示例,每次数字超出边界时,它应更新为新的起始编号,限制为5.

HTML

<ul class="pagination">
    <li ng-class="{'disabled': vm.current_page == 1,'waves-effect': vm.current_page != 1}" ng-click="vm.previous_user_page()">
        <a><i class="material-icons">chevron_left</i></a>
    </li>
    <li ng-repeat="i in vm.pagination_number(vm.number)  | limitTo: 5 | startFrom: vm.current_page - 3 track by $index" class="waves-effect" ng-class="{active: $index+1 == vm.current_page}" ng-click="vm.display_user($index+1)">
        <a>{{$index+1}}</a>
    </li>
    <li ng-class="{disabled: vm.current_page == vm.number,'waves-effect': vm.current_page != vm.number}" ng-click="vm.next_user_page()">
        <a><i class="material-icons">chevron_right</i></a>
    </li>
</ul>

JS

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

AdminUserController.$inject = ['$rootScope','Pagination','$scope'];

function AdminUserController($rootScope,Pagination,$scope) {
    var vm = this;
    vm.pagination_number = pagination_number;
    vm.display_user = display_user;
    vm.number = 0;
    vm.users = [];
    vm.current_page = 1;
    vm.size = 1;
    vm.limit = 4;
    vm.next_user_page = next_user_page;
    vm.previous_user_page = previous_user_page;

    $rootScope.user_menu = [{name:'Profile',path:'profile'},{name:'Setting',path:'setting'},{name:'Home',path:''}];
    $rootScope.home_default = false;

    Math.ceil(1.4)
    $scope.$on('$viewContentLoaded', function(){
        Pagination.get({page : 1, size:vm.size},function(res){
            vm.users = (res.response);
        });
        Pagination.get(function(res){
            vm.number = ( Math.ceil(res.response/vm.size));
        });
    })  

    function pagination_number(number){
        return new Array(number);
    }

    function display_user(page){
        vm.current_page = page;
        Pagination.get({page : page, size:vm.size},function(res){
            vm.users = (res.response);
        });   
    }

    function next_user_page(){
        if(vm.current_page < vm.number){
            var page = vm.current_page + 1;
            Pagination.get({page : page, size:vm.size},function(res){
                vm.users = (res.response);
                vm.current_page = page;
            });
        }

    }

    function previous_user_page(){
        if(vm.current_page > 1){
            var page = vm.current_page - 1;
            Pagination.get({page : page, size:vm.size},function(res){
                vm.users = (res.response);
                vm.current_page = page
            });
        }
    }
}

根据我目前的进展,startFrom过滤器正在发生变化。我做错了什么。?

0 个答案:

没有答案