limitTo实现分页效果

limitTo:param1:param2 (截取的长度：截取的起始坐标（索引值）)
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>angular-limitTo实现分页</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <div ng-controller="myCtrl">
        <ul class="list-group" style="width:20%;margin-top:20px;">
            <li class="list-group-item" ng-repeat="arr in arrs|limitTo:2:pageNum">
                name:{{arr.name}}  
                age:{{arr.age}}
            </li>
        </ul>

        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li ng-click="pre()">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li ng-click="page(paginationNum)" ng-repeat="paginationNum in paginationNums" ng-class="{'active':paginationNum == pageNum/2+1}"><a href="#">{{paginationNum}}</a></li>
                <li ng-click="next()">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</body>
<script src="js/angular.js"></script>
<script>
    var app = angular.module('myApp',[]);
    app.controller('myCtrl',['$scope','$http',function($scope,$http){
        $scope.pageNum = 0;
        $scope.limitNum = 2;
        $scope.page = function(pageNum){
            $scope.pageNum = (pageNum - 1)*2
        }
        $scope.pre = function(){
            if($scope.pageNum == 0){
                return false;
            }
            $scope.pageNum -= 2;
        }
        $scope.next = function(){
            if($scope.pageNum == $scope.arrs.length - 2){
                return false;
            }
            $scope.pageNum += 2;
        }

        $scope.arrs = [{
            name:'aa',
            age:1
        },{
            name:'bb',
            age:2
        },{
            name:'cc',
            age:3
        },{
            name:'dd',
            age:4
        },{
            name:'ee',
            age:5
        },{
            name:'ff',
            age:6
        },{
            name:'gg',
            age:7
        },{
            name:'tt',
            age:8
        }]
        $scope.paginationNums = [];
        var maxPage = Math.ceil($scope.arrs.length / 2);
        for(var i=0;i<maxPage;i++){
            $scope.paginationNums.push(i+1)
        }
    }])
</script>
</html>
Narutocc / angular

limitTo实现分页效果 #13
