Bellekte yaklaşık 1000 öğeden oluşan bir veri kümem var ve bu veri kümesi için bir çağrı cihazı oluşturmaya çalışıyorum, ancak bunu nasıl yapacağımdan emin değilim.

Sonuçları filtrelemek için özel bir filtre işlevi kullanıyorum ve bu iyi çalışıyor, ama bir şekilde sayfaların sayısını almak gerekiyor.

Herhangi bir ipucu var mı?

Açısal UI Bootstrap - Sayfalandırma Yönergesi

Check out UI Bootstrap 'ın sayfalara ayrılmış yönergesini . Geçerli kullanımım için yeterli özelliklere sahip olduğu ve ona eşlik edecek kapsamlı bir test özelliğine sahip olduğu için burada yayınlananlardan ziyade onu kullandım .

Görünüm

<!-- table here -->

<pagination 
  ng-model="currentPage"
  total-items="todos.length"
  max-size="maxSize"  
  boundary-links="true">
</pagination>

<!-- items/page select here if you like -->

kontrolör

todos.controller("TodoController", function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i, done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.$watch("currentPage + numPerPage", function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

Referans için çalışan bir dalma pistonu yaptım .

Eski sürüm:

Görünüm

<!-- table here -->

<div data-pagination="" data-num-pages="numPages()" 
  data-current-page="currentPage" data-max-size="maxSize"  
  data-boundary-links="true"></div>

<!-- items/page select here if you like -->

kontrolör

todos.controller("TodoController", function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i, done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.numPages = function () {
    return Math.ceil($scope.todos.length / $scope.numPerPage);
  };

  $scope.$watch("currentPage + numPerPage", function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

Referans için çalışan bir dalma pistonu yaptım .

Kısa süre önce Built with Angular sitesi için çağrı uyguladım. Kaynağı kontrol etmen gerekiyor: https://github.com/angular/builtwith.angularjs.org

Sayfaları ayırmak için filtre kullanmaktan kaçınırım. Öğeleri denetleyicideki sayfalara ayırmalısınız.

Sayfalandırmayı Angular ile birkaç kez uygulamak zorunda kaldım ve basitleştirilebileceğini hissettiğim bir şey için her zaman biraz acı çekiyordu. Burada ve başka yerlerde sunulan fikirlerden bazılarını, sayfalandırmayı aşağıdaki kadar basit hale getiren bir sayfalama modülü yapmak için kullandım:

<ul>
    <li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>

// then somewhere else on the page ....

<dir-pagination-controls></dir-pagination-controls>

Bu kadar. Aşağıdaki özelliklere sahiptir:

• Koleksiyonu itemssayfalandırma bağlantılarına bağlamak için kumandanızda özel bir kod gerekmez .
• Bir tablo veya gridview kullanmak zorunda değilsiniz - tekrarlayabileceğiniz her şeyi sayfalandırabilirsiniz!
• Temsilci ng-repeatseçildiğinden, bir sitede geçerli olarak kullanılabilecek herhangi bir ifadeyi kullanabilirsiniz.ng-repeatFiltreleme, sipariş verme vb. Dahil olmak üzere .
• Kontrolörler arasında çalışır - pagination-controlsdirektifin, paginatedirektifin çağrıldığı bağlam hakkında hiçbir şey bilmesine gerek yoktur .

Demo: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

"Tak ve çalıştır" çözümü arayanlar için bence bunu faydalı bulacaksınız.

kod

Kod, GitHub'da mevcuttur ve oldukça iyi bir dizi test içerir:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

Eğer ilgileniyorsanız ayrıca modülün tasarımı hakkında biraz daha fikir içeren kısa bir parça yazdım: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/

Ben sadece btford kodu kullanarak her sütun üzerinde sayfalama + arama + sipariş gösteren bir JSFiddle yaptım: http://jsfiddle.net/SAWsA/11/

Scotty.NET'in plunkr'ını güncelledim http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview açısal, açısal-ui ve bootstrap'ın daha yeni sürümlerini .

kontrolör

var todos = angular.module('todos', ['ui.bootstrap']);

todos.controller('TodoController', function($scope) {
  $scope.filteredTodos = [];
  $scope.itemsPerPage = 30;
  $scope.currentPage = 4;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:'todo '+i, done:false});
    }
  };

  $scope.figureOutTodosToDisplay = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;
    $scope.filteredTodos = $scope.todos.slice(begin, end);
  };

  $scope.makeTodos(); 
  $scope.figureOutTodosToDisplay();

  $scope.pageChanged = function() {
    $scope.figureOutTodosToDisplay();
  };

});

Bootstrap kullanıcı arayüzü bileşeni

 <pagination boundary-links="true" 
    max-size="3" 
    items-per-page="itemsPerPage"
    total-items="todos.length" 
    ng-model="currentPage" 
    ng-change="pageChanged()"></pagination>

Bu, google arama sonuçlarında olduğu gibi sayfalandırma mantığını uygulamak için bir Açısal hizmet olarak tamamladığım saf bir javascript çözümüdür.

CodePen üzerinde çalışan demo: http://codepen.io/cornflourblue/pen/KVeaQL/

Bu blog yazısında ayrıntılar ve açıklamalar

function PagerService() {
    // service definition
    var service = {};

    service.GetPager = GetPager;

    return service;

    // service implementation
    function GetPager(totalItems, currentPage, pageSize) {
        // default to first page
        currentPage = currentPage || 1;

        // default page size is 10
        pageSize = pageSize || 10;

        // calculate total pages
        var totalPages = Math.ceil(totalItems / pageSize);

        var startPage, endPage;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }

        // calculate start and end item indexes
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = startIndex + pageSize;

        // create an array of pages to ng-repeat in the pager control
        var pages = _.range(startPage, endPage + 1);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

Burada ilgili bitleri çıkardım. Bu bir 'fırfırlar yok' sekmeli çağrı cihazıdır, bu nedenle sıralama veya filtreleme dahil değildir. Gerektiğinde değiştirmek / eklemek için çekinmeyin:

     //your data source may be different. the following line is 
     //just for demonstration purposes only
    var modelData = [{
      text: 'Test1'
    }, {
      text: 'Test2'
    }, {
      text: 'Test3'
    }];

    (function(util) {

      util.PAGE_SIZE = 10;

      util.range = function(start, end) {
        var rng = [];

        if (!end) {
          end = start;
          start = 0;
        }

        for (var i = start; i < end; i++)
          rng.push(i);

        return rng;
      };

      util.Pager = function(data) {
        var self = this,
          _size = util.PAGE_SIZE;;

        self.current = 0;

        self.content = function(index) {
          var start = index * self.size,
            end = (index * self.size + self.size) > data.length ? data.length : (index * self.size + self.size);

          return data.slice(start, end);
        };

        self.next = function() {
          if (!self.canPage('Next')) return;
          self.current++;
        };

        self.prev = function() {
          if (!self.canPage('Prev')) return;
          self.current--;
        };

        self.canPage = function(dir) {
          if (dir === 'Next') return self.current < self.count - 1;
          if (dir === 'Prev') return self.current > 0;
          return false;
        };

        self.list = function() {
          var start, end;
          start = self.current < 5 ? 0 : self.current - 5;
          end = self.count - self.current < 5 ? self.count : self.current + 5;
          return Util.range(start, end);
        };

        Object.defineProperty(self, 'size', {
          configurable: false,
          enumerable: false,
          get: function() {
            return _size;
          },
          set: function(val) {
            _size = val || _size;
          }
        });

        Object.defineProperty(self, 'count', {
          configurable: false,
          enumerable: false,
          get: function() {
            return Math.ceil(data.length / self.size);
          }
        });
      };

    })(window.Util = window.Util || {});

    (function(ns) {
      ns.SampleController = function($scope, $window) {
        $scope.ModelData = modelData;
        //instantiate pager with array (i.e. our model)
        $scope.pages = new $window.Util.Pager($scope.ModelData);
      };
    })(window.Controllers = window.Controllers || {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-controller="Controllers.SampleController">
  <thead>
    <tr>
      <th>
        Col1
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in pages.content(pages.current)" title="{{item.text}}">
      <td ng-bind-template="{{item.text}}"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
        <a href="#" ng-click="pages.prev()">&laquo;</a>
        <a href="#" ng-repeat="n in pages.list()" ng-click="pages.current = n" style="margin: 0 2px;">{{n + 1}}</a>
        <a href="#" ng-click="pages.next()">&raquo;</a>
      </td>
    </tr>
  </tfoot>
</table>

Aşağıdaki çözüm oldukça basit.

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

<tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) "> 

İşte örnek jsfiddle

JQuery Mobile açısal adaptöründe temel alabileceğiniz bir sayfalama filtresi vardır.

İşte onu kullanan bir demo keman (5'den fazla öğe ekleyin ve sayfalanmış olur): http://jsfiddle.net/tigbro/Du2DY/

İşte kaynak: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js

Benim gibi bir tablo için sayfa oluşturmayı zor bulan herkes için bunu gönderiyorum. Yani, sizce:

          <pagination total-items="total" items-per-page="itemPerPage"    ng-model="currentPage" ng-change="pageChanged()"></pagination>    
        <!-- To specify your choice of items Per Pages-->
     <div class="btn-group">
                <label class="btn btn-primary" ng-model="radioModel"  btn-radio="'Left'" data-ng-click="setItems(5)">5</label>
                <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'" data-ng-click="setItems(10)">10</label>
                <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'" data-ng-click="setItems(15)">15</label>
            </div>
     //And don't forget in your table:
      <tr data-ng-repeat="p in profiles | offset: (currentPage-1)*itemPerPage | limitTo: itemPerPage" >

Açısal J'lerinizde:

  var module = angular.module('myapp',['ui.bootstrap','dialogs']);
  module.controller('myController',function($scope,$http){
   $scope.total = $scope.mylist.length;     
   $scope.currentPage = 1;
   $scope.itemPerPage = 2;
   $scope.start = 0;

   $scope.setItems = function(n){
         $scope.itemPerPage = n;
   };
   // In case you can replace ($scope.currentPage - 1) * $scope.itemPerPage in <tr> by "start"
   $scope.pageChanged = function() {
        $scope.start = ($scope.currentPage - 1) * $scope.itemPerPage;
            };  
});
   //and our filter
     module.filter('offset', function() {
              return function(input, start) {
                start = parseInt(start, 10);
                return input.slice(start);
              };
            });     

Bu 3. taraf sayfalama kütüphanesini kullanıyorum ve iyi çalışıyor. Yerel / uzak veri kaynakları yapabilir ve çok yapılandırılabilir.

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

<dir-pagination-controls
    [max-size=""]
    [direction-links=""]
    [boundary-links=""]
    [on-page-change=""]
    [pagination-id=""]
    [template-url=""]
    [auto-hide=""]>
    </dir-pagination-controls>

Açısal 1.4'ten beri, limitTofiltre ikinci bir isteğe bağlı bağımsız değişkeni de kabul ederbegin

Gönderen docs :

{{limitTo_expression | limitTo: limit: başlangıç}}

begin (isteğe bağlı) string | number
Sınırlamanın başlatılacağı dizin. Negatif bir dizin olarak başlangıç, girişin sonundan bir sapmayı gösterir. Varsayılan değeri 0'dır.

Yani yeni bir yönerge oluşturmanıza gerek yok , Bu argüman sayfa numarasının ofsetini ayarlamak için kullanılabilir

ng-repeat="item in vm.items| limitTo: vm.itemsPerPage: (vm.currentPage-1)*vm.itemsPerPage" 

Bunu Bootstrap UI yönergesini kullanarak kolayca yapabilirsiniz.

Bu cevap @ Scotty.NET tarafından verilen cevabın bir modifikasyonudur, <pagination>direktif şimdi kullanımdan kaldırıldığı için kodu değiştirdim .

Aşağıdaki kod sayfalandırmayı oluşturur:

<ul uib-pagination 
    boundary-links="true"  
    total-items="totalItems"  
    items-per-page="itemsPerPage"  
    ng-model="currentPage"  
    ng-change="pageChanged()"  
    class="pagination"  
    previous-text="&lsaquo;"  
    next-text="&rsaquo;"  
    first-text="&laquo;"  
    last-text="&raquo;">
</ul>

İşlevsel hale getirmek için bunu kontrol cihazınızda kullanın:

$scope.filteredData = []
$scope.totalItems = $scope.data.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 5;

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

$scope.pageChanged = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage)
    , end = begin + $scope.itemsPerPage;

    $scope.filteredData = $scope.data.slice(begin, end);
};

$scope.pageChanged();

Daha fazla sayfalandırma seçeneği için buna bakın: Bootstrap UI Sayfalandırma Yönergesi

ng-tekrar sayfalama

    <div ng-app="myApp" ng-controller="MyCtrl">
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<select ng-model="pageSize" id="pageSize" class="form-control">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
 </select>
<ul>
    <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
        {{item}}
    </li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
 <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-                 click="currentPage=currentPage+1">
    Next
    </button>
</div>

<script>

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

 app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
 $scope.currentPage = 0;
 $scope.pageSize = 10;
 $scope.data = [];
 $scope.q = '';

 $scope.getData = function () {

  return $filter('filter')($scope.data, $scope.q)

   }

   $scope.numberOfPages=function(){
    return Math.ceil($scope.getData().length/$scope.pageSize);                
   }

   for (var i=0; i<65; i++) {
    $scope.data.push("Item "+i);
   }
  }]);

        app.filter('startFrom', function() {
    return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
   }
  });
  </script>

Önceki iletiler, temel olarak kendi sayfanızı nasıl oluşturacağınızı önerdi. Eğer benim gibiyseniz ve bitmiş bir yönergeyi tercih ediyorsanız, ngTable adlı harika bir tane buldum . Sıralama, filtreleme ve sayfalamayı destekler.

Çok temiz bir çözüm, tek ihtiyacınız olan şey:

   <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
    </table>

Ve denetleyicide:

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    sorting: {
        name: 'asc'     // initial sorting
    }
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var orderedData = params.sorting() ?
                            $filter('orderBy')(data, params.orderBy()) :
                            data;

        var start = (params.page() - 1) * params.count();
        var end = params.page() * params.count();

        $defer.resolve(orderedData.slice( start, end));
    }
});

GitHub'a bağlantı: https://github.com/esvit/ng-table/

Eğik-Çağrı

harika bir seçim

Gerçek veri bilgilerinin en azını gerektirirken büyük veri kümelerinin sayfalanmasına yardımcı olan bir direktif. Bu sayfalama şemasındaki sonuçları filtrelemek için sunucuya çok bağımlıyız. Ana fikir, öğelerin tüm listesini bellekte tutmak ve istemci tarafında sayfalamak yerine, öğelerin yalnızca etkin "sayfasını" tutmak istiyoruz.

Eski bir soru ama yaklaşımımın biraz daha farklı ve daha az karmaşık olduğunu düşündüğüm için bunu paylaşacağım ve umarım yanımdaki birisinin bunu faydalı bulacağını umuyorum.

Kolay ve küçük bir çözüm bulduğum şeySayfalandırma şey, bir yönerge aynı kapsam değişkenlerini kullanan bir filtreyle birleştirmektir.

Bunu uygulamak için diziye filtre eklersiniz ve directiv komutunu bu şekilde eklersiniz

<div class="row">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items | cust_pagination:p_Size:p_Step">
                <td>{{item.Name}}</td>
                <td>{{item.Price}}</td>
                <td>{{item.Quantity}}</td>
            </tr>
        </tbody>
    </table>
    <div cust-pagination p-items="items" p-boundarylinks="true" p-size="p_Size" p-step="p_Step"></div>
</div>

p_Size ve p_Step, kapsamda özelleştirilebilen kapsam değişkenleridir, p_Size öğesinin varsayılan değeri 5 ve p_Step 1'dir.

Sayfalamada bir adım değiştirildiğinde, p_Step güncellenir ve cust_pagination filtresi ile yeni bir filtreyi tetikler. Cust_pagination filtresi daha sonra aşağıdaki gibi p_Step değerine bağlı olarak diziyi dilimler ve yalnızca sayfalandırma bölümünde seçilen etkin kayıtları döndürür

var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;

DEMO Bu dalma pistonundaki komple çözümü görüntüleyin

Benim örneğim var. Liste Denetleyicisinin ortasındaki seçili düğme. yapılandırma >>>

 $scope.pagination = {total: null, pages: [], config: {count: 10, page: 1, size: 7}};

Sayfalandırma için mantık:

/*
     Pagination
     */
    $scope.$watch('pagination.total', function (total) {
        if(!total || total <= $scope.pagination.config.count) return;
        _setPaginationPages(total);
    });

    function _setPaginationPages(total) {
        var totalPages = Math.ceil(total / $scope.pagination.config.count);
        var pages = [];
        var start = $scope.pagination.config.page - Math.floor($scope.pagination.config.size/2);
        var finish = null;

        if((start + $scope.pagination.config.size - 1) > totalPages){
            start = totalPages - $scope.pagination.config.size;
        }
        if(start <= 0) {
            start = 1;
        }

       finish = start +  $scope.pagination.config.size - 1;
       if(finish > totalPages){
           finish = totalPages;
       }


        for (var i = start; i <= finish; i++) {
            pages.push(i);
        }

        $scope.pagination.pages = pages;
    }

    $scope.$watch("pagination.config.page", function(page){
        _setPaginationPages($scope.pagination.total);
        _getRespondents($scope.pagination.config);
    });

ve bootstap hakkındaki görüşüm

<ul ng-class="{hidden: pagination.total == 0}" class="pagination">
        <li ng-click="pagination.config.page = pagination.config.page - 1"
            ng-class="{disabled: pagination.config.page == 1}" ><a href="#">&laquo;</a></li>
        <li ng-repeat="p in pagination.pages"
            ng-click="pagination.config.page = p"
            ng-class="{active: p == pagination.config.page}"><a href="#">{{p}}</a></li>
        <li ng-click="pagination.config.page = pagination.config.page + 1"
            ng-class="{disabled: pagination.config.page == pagination.pages.length}"><a href="#">&raquo;</a></li>
    </ul >

Bu kullanışlı

Keşke yorum yapabilsem, ama bunu burada bırakmam gerekecek:

Scotty.NET'in yanıtı ve user2176745'in sonraki sürümler için yinelemesi harika, ancak ikisi de AngularJS (v1.3.15) sürümümün kırdığı bir şeyi özlüyor:

i $ scope.makeTodos içinde tanımlanmamıştır.

Bu nedenle, bu işlevle değiştirilmesi, daha yeni açısal sürümler için sabitler.

$scope.makeTodos = function() {
    var i;
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
        $scope.todos.push({ text:'todo '+i, done:false});
    }
};

Genel Bakış : Sayfa numaralandırma

 - ng-repeat
 - uib-pagination

Görüntüle :

<div class="row">
    <div class="col-lg-12">
        <table class="table">
            <thead style="background-color: #eee">
                <tr>
                    <td>Dispature</td>
                    <td>Service</td>
                    <td>Host</td>
                    <td>Value</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in app.metricsList">
                    <td>{{x.dispature}}</td>
                    <td>{{x.service}}</td>
                    <td>{{x.host}}</td>
                    <td>{{x.value}}</td>
                </tr>
            </tbody>
        </table>

        <div align="center">
            <uib-pagination items-per-page="app.itemPerPage" num-pages="numPages"
                total-items="app.totalItems" boundary-link-numbers="true"
                ng-model="app.currentPage" rotate="false" max-size="app.maxSize"
                class="pagination-sm" boundary-links="true"
                ng-click="app.getPagableRecords()"></uib-pagination>        

            <div style="float: right; margin: 15px">
                <pre>Page: {{app.currentPage}} / {{numPages}}</pre>
            </div>          
        </div>
    </div>
</div>

JS Denetleyici :

app.controller('AllEntryCtrl',['$scope','$http','$timeout','$rootScope', function($scope,$http,$timeout,$rootScope){

    var app = this;
    app.currentPage = 1;
    app.maxSize = 5;
    app.itemPerPage = 5;
    app.totalItems = 0;

    app.countRecords = function() {
        $http.get("countRecord")
        .success(function(data,status,headers,config){
            app.totalItems = data;
        })
        .error(function(data,status,header,config){
            console.log(data);
        });
    };

    app.getPagableRecords = function() {
        var param = {
                page : app.currentPage,
                size : app.itemPerPage  
        };
        $http.get("allRecordPagination",{params : param})
        .success(function(data,status,headers,config){
            app.metricsList = data.content;
        })
        .error(function(data,status,header,config){
            console.log(data);
        });
    };

    app.countRecords();
    app.getPagableRecords();

}]);

ngRepeatBir $watchveya dilimlenmiş bir dizi kullanmadan onunla birlikte çalışan ve filtre kullanarak benim çözüm eklemek istiyorum .

Filtre sonuçlarınız sayfalandırılacak!

var app = angular.module('app', ['ui.bootstrap']);

app.controller('myController', ['$scope', function($scope){
    $scope.list= ['a', 'b', 'c', 'd', 'e'];

    $scope.pagination = {
        currentPage: 1,
        numPerPage: 5,
        totalItems: 0
    };

    $scope.searchFilter = function(item) {
        //Your filter results will be paginated!
        //The pagination will work even with other filters involved
        //The total number of items in the result of your filter is accounted for
    };

    $scope.paginationFilter = function(item, index) {
        //Every time the filter is used it restarts the totalItems
        if(index === 0) 
            $scope.pagination.totalItems = 0;

        //This holds the totalItems after the filters are applied
        $scope.pagination.totalItems++;

        if(
            index >= (($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage)
            && index < ((($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage) + $scope.pagination.numPerPage)
        )
            return true; //return true if item index is on the currentPage

        return false;
    };
}]);

HTML'de filtrelerinizi sayfalandırma filtresinden ngRepeat önce uyguladığınızdan emin olun .

<table data-ng-controller="myController">
    <tr data-ng-repeat="item in list | filter: searchFilter | filter: paginationFilter track by $index">
        <td>
            {{item}}
        </td>
    <tr>
</table>
<ul class="pagination-sm"
    uib-pagination
    data-boundary-links="true"
    data-total-items="pagination.totalItems"
    data-items-per-page="pagination.numPerPage"
    data-ng-model="pagination.currentPage"
    data-previous-text="&lsaquo;"
    data-next-text="&rsaquo;"
    data-first-text="&laquo;"
    data-last-text="&raquo;">
 </ul>