限制的ngrepeat數到10，但它顯示了在一旦所有40項

<html> 

<head> 
    <script src=jquery.js></script> 
    <script src=bootstrap.js></script> 
    <script src=angular.js></script> 
    <script data-require="[email protected]*" 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>

限制的ngrepeat數到10，但它顯示了在一旦所有40項

我已經能夠用10 perpage進行分頁的項目，即一共40個使用「UI 4頁分頁.bootstrap」。但是，我的所有40個項目都以ng-repeat顯示，但我只需要1-10,11-20,21-30,31-40即一次顯示10個perpage。有人可以幫我嗎？

來源

2015-04-06 Deadpool

您ngRepeat應該使用'limitTo' filter

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

也limitTo會返回一個新的數組，除非你觀察到的當前頁屬性的變化保持固定在第一頁上

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

來源

2015-04-06 10:47:23

它是好的。它現在限制爲10個項目，但在分頁時推送2不會帶來11-20個內容;（ – Deadpool 2015-04-06 10:50:28

您是否在使用http://angular-ui.github.io/bootstrap/進行分頁？ – 2015-04-06 11:34:44

是的！我僅使用它... – Deadpool 2015-04-06 11:41:23

限制的ngrepeat數到10，但它顯示了在一旦所有40項

回答

相關問題