将 ngrepeat 的数量限制为 10，但它一次显示所有 40 个项目答案

【问题标题】：Limiting the number of ngrepeat to 10 but it shows all 40 items at once将 ngrepeat 的数量限制为 10，但它一次显示所有 40 个项目
【发布时间】：2015-04-08 23:11:33
【问题描述】：

<html>

<head>
    <script src=jquery.js></script> 
    <script src=bootstrap.js></script> 
    <script src=angular.js></script> 
    <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel=stylesheet type="text/css" href=bootstrap.css /> 
    <link rel=stylesheet type=text/css href=mystyle.css /> 

    <style>
        #panel{margin:20px;}
        #addNew{margin:10px;}
        #pagination{text-align:center;}
    </style> 

</head>

<body ng-app="myApp">

    <div ng-controller=myController> 

        <div id=panel class="panel panel-primary"> 
            <div class="panel-heading">Hero Selection Bar</div>
            <div class="panel-body">
                <a href=page2.html><button id=addNew class="btn btn-primary">Add New</button></a>
                <table class="table table-striped">
                    <tr ng-repeat="x in alpha"><td>{{x.id}}</td></tr>
                </table> 

                <pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>

                </div> 
        </div> 
    </div> 


    <script>
    var app = angular.module('myApp',['ui.bootstrap']);

    app.controller('myController', function( $scope, myFactory){
        $scope.alpha = myFactory; 

        $scope.totalItems = 40;
        $scope.itemsPerPage = 10
        $scope.currentPage = 1;

        $scope.setPage = function (pageNo) {
            $scope.currentPage = pageNo;
        };


    });

    app.factory('myFactory',function(){
        var data = [ 
                     { "id":"000001","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000002","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000003","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000004","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000005","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000006","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000007","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000008","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000009","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000010","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000011","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000012","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000013","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000014","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000015","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000016","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000017","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000018","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000019","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000020","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000021","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000022","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000023","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000024","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000025","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000026","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000027","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000028","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000029","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000030","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000031","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000032","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000033","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000034","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000035","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000036","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000037","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000038","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000039","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                     { "id":"000040","mainCategory":"Category A","subCategory":"Test A","notes":"Nothing","createdBy":"Joseph","Action":""},
                    ];

                    return data;
    });

    </script> 

</body>

我已经能够使用“ui.bootstrap”对每页 10 个项目进行分页，即总共 40 个，分页 4 个页面。但是，我的所有 40 个项目都显示在 ng-repeat 中，但我只希望一次显示 1-10,11-20,21-30,31-40，即每页 10 个。有人可以帮我吗？

【问题讨论】：

标签： angularjs pagination angular-ui-bootstrap

【解决方案1】：

您的 ngRepeat 应该使用 'limitTo' filter

ng-repeat="x in alpha | limitTo:itemsPerPage:(itemsPerPage * currentPage)"

另外，limitTo 将返回一个新数组，并在第一页上保持固定，除非您观察到 currentPage 属性的变化

app.controller('myController', function( $scope, myFactory){
    $scope.alpha = myFactory; 
    $scope.pagination = {  
        totalItems: 40,
        itemsPerPage: 10,
        currentPage: 1
    }
    $scope.itemsToShow = $scope.alpha.slice(0, $scope.pagination.itemsPerPage);

    $scope.$watch('pagination.currentPage', function(newValue, oldValue) {
        var page = $scope.pagination.currentPage - 1;
        var start = page * $scope.pagination.itemsPerPage;
        var end = start + $scope.pagination.itemsPerPage;

        $scope.itemsToShow = $scope.alpha.slice(start, end);
    });
});

分页：

<pagination total-items="pagination.totalItems" items-per-page="pagination.itemsPerPage" ng-model="pagination.currentPage"></pagination>

表：

<tr ng-repeat="x in itemsToShow"><td>{{x.id}}</td></tr>

看到它在行动here

【讨论】：

没关系。它现在限制为 10 个项目，但在分页上按 2 不会带来 11-20 个内容；(