wake-up-neo.com

Wie mache ich Paging in AngularJS?

Ich habe ein Dataset von etwa 1000 Elementen im Speicher und versuche, einen Pager für dieses Dataset zu erstellen.

Ich verwende eine benutzerdefinierte Filterfunktion zum Filtern der Ergebnisse, und das funktioniert gut, aber irgendwie muss ich die Anzahl der Seiten herausholen.

Irgendwelche Hinweise?

angularjspagination
246
Micael

Angular UI Bootstrap - Paginierungsrichtlinie

Check out UI Bootstrap 's pagination Direktive . Am Ende habe ich es benutzt und nicht das, was hier veröffentlicht wurde, da es über genügend Funktionen für meinen aktuellen Gebrauch verfügt und eine gründliche Testspezifikation hat.

Aussicht

<!-- table here -->

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

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

Regler

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);
  });
});

Ich habe einen Arbeitsplunker als Referenz gemacht.

Legacy-Version:

Aussicht

<!-- 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 -->

Regler

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);
  });
});

Ich habe einen Arbeitsplunker als Referenz gemacht.

273
Scotty.NET

Ich habe kürzlich Paging für die Built with Angular-Site implementiert. Sie können die Quelle überprüfen: https://github.com/angular/builtwith.angularjs.org

Ich würde vermeiden, einen Filter zu verwenden, um die Seiten zu trennen. Sie sollten die Elemente in Seiten des Controllers aufteilen.

88
btford

Ich musste einige Male mit Angular die Paginierung implementieren, und es war immer ein bisschen schmerzhaft für etwas, von dem ich glaubte, dass es vereinfacht werden könnte. Ich habe einige der hier und anderswo vorgestellten Ideen verwendet, um ein Paginierungsmodul zu erstellen, das die Paginierung so einfach macht wie:

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

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

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

Das ist es. Es hat die folgenden Funktionen:

  • In Ihrem Controller ist kein benutzerdefinierter Code erforderlich, um die Auflistung items an die Paginierungslinks zu binden. 
  • Sie sind nicht verpflichtet, eine Tabelle oder eine Rasteransicht zu verwenden - Sie können alles paginieren, was Sie nicht wiederholen können!
  • Delegiert an ng-repeat, sodass Sie einen beliebigen Ausdruck verwenden können, der in einem ng-repeat gültig verwendet werden kann, einschließlich Filtern, Sortieren usw.
  • Funktioniert über Controller hinweg - Die pagination-controls-Direktive muss nichts über den Kontext wissen, in dem die paginate-Direktive aufgerufen wird.

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

Für diejenigen, die eine "Plug-and-Play" -Lösung suchen, werden Sie meiner Meinung nach nützlich sein.

Code

Der Code ist hier auf GitHub verfügbar und enthält eine Reihe guter Tests:

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

Wenn Sie interessiert sind, habe ich auch ein kurzes Stück mit etwas mehr Einblick in das Design des Moduls geschrieben: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/

78
Michael Bromley

Ich habe gerade ein JSFiddle erstellt, das die Paginierung + Suche + Sortierung in jeder Spalte mit dem Btford-Code zeigt: http://jsfiddle.net/SAWsA/11/

62
Spir

Ich habe Scotty.NETs plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview aktualisiert, sodass neuere Versionen von angle, angle-ui und bootstrap verwendet werden.

Regler

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-UI-Komponente

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

Dies ist eine reine Javascript-Lösung, die ich als Angular-Service zur Implementierung von Paginierungslogik wie in Google-Suchergebnissen verpackt habe.

Arbeitsdemo zu CodePen unter http://codepen.io/cornflourblue/pen/KVeaQL/

Details und Erklärung unter diesem Blogbeitrag

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
        };
    }
}
8
Jason

Ich habe die relevanten Bits hier extrahiert. Dies ist ein tabellarischer Pager, der keine Schnickschnackausführung bietet. Fühlen Sie sich frei, nach Bedarf zu ändern/hinzuzufügen:

     //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>

4
msyed

Unter Lösung ganz einfach.

<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) ">

Hier ist ein Beispiel jsfiddle

3
Sh4m

Der jQuery Mobile-Winkeladapter verfügt über einen Paging-Filter, auf den Sie zugreifen können. 

Hier ist eine Demo-Geige, die es verwendet (fügen Sie mehr als 5 Elemente hinzu und es wird paginiert): http://jsfiddle.net/tigbro/Du2DY/

Hier ist die Quelle: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js

3
Andrew Joslin

Für jeden, der es für mich schwierig findet, einen Paginator für eine Tabelle zu erstellen, poste ich das hier.

          <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" >

In deinen kanteln:

  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);
              };
            });
3
K.Mouna

Ich verwende diese Drittanbieter-Paginierungsbibliothek und sie funktioniert gut. Es kann lokale/entfernte Datenquellen verwenden und ist sehr konfigurierbar.

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>
3
Henry Zou

Seit Angular 1.4 akzeptiert der limitTo-Filter auch ein zweites optionales Argument begin

Aus den docs :

{{limitTo_expression | limitTo: limit: begin}}

start (wahlweise) Zeichenfolge | Nummer
Index, an dem die Begrenzung beginnen soll. Als negativer Index gibt begin einen Offset vom Ende der Eingabe an. Standardeinstellung ist 0.

Sie müssen also keine neue Direktive erstellen. Mit diesem Argument können Sie den Versatz der Paginierung festlegen

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

ng-wiederholen Paginierung 

    <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>
2
Asad

Angular-Paging

ist eine wunderbare Wahl

Eine Anweisung, die beim Paging großer Datensätze helfen soll, wobei das Minimum an tatsächlichen Paging-Informationen erforderlich ist. Wir sind sehr abhängig von dem Server, um die Ergebnisse in diesem Paging-Schema zu filtern. Die zentrale Idee ist, dass wir nur die aktive "Seite" von Elementen speichern möchten, anstatt die gesamte Liste der Elemente im Speicher und auf Seiten des Clients zu speichern.

1
sendreams

In früheren Nachrichten wurde im Wesentlichen empfohlen, wie Sie selbst ein Paging erstellen. Wenn Sie wie ich sind und eine fertige Direktive bevorzugen, habe ich gerade eine großartige Anweisung namens ngTable gefunden. Es unterstützt das Sortieren, Filtern und Paginieren. 

Es ist eine sehr saubere Lösung, alles was Sie für Ihre Sicht brauchen:

   <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>

Und im Controller:

$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));
    }
});

Link zu GitHub: https://github.com/esvit/ng-table/

1
Carlos Barcelona

Alte Frage, aber da ich denke, dass mein Ansatz ein wenig anders und weniger komplex ist, werde ich dies teilen und hoffen, dass jemand außer mir es nützlich findet.

Was ich als einfache und kleine Lösungfür die Paginierung empfand, ist die Kombination einer Direktive mit einem Filter, der die gleichen Bereichsvariablen verwendet.

Um dies zu implementieren, fügen Sie den Filter im Array hinzu und fügen die Direktive wie folgt hinzu

<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 und p_Step sind Bereichsvariablen, die im Gültigkeitsbereich angepasst werden können. Andernfalls ist der Standardwert von p_Size 5 und p_Step 1.

Wenn ein Schritt in der Paginierung geändert wird, wird p_Step aktualisiert und löst eine neue Filterung durch den Filter cust_pagination aus. Der Filter cust_pagination schneidet dann das Array in Abhängigkeit vom p_Step-Wert wie unten und gibt nur die aktiven Datensätze zurück, die im Abschnitt Paginierung ausgewählt wurden

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

DEMOZeigen Sie die vollständige Lösung in diesem Plunker an

1
Marcus Höglund

Da ist mein Beispiel. Ausgewählte Schaltfläche in der Mitte der Liste Controller . Config >>>

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

Logik für die Paginierung:

/*
     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);
    });

und meine Sicht auf Bootstap

<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 >

Es ist nützlich

1
Alexey

Ich möchte meine Lösung hinzufügen, die mit ngRepeat arbeitet, und die Filter, die Sie damit verwenden, ohne einen $watch oder ein geschnittenes Array.

Ihre Filterergebnisse werden paginiert! 

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;
    };
}]);

Stellen Sie im HTML-Code sicher, dass Sie Ihre Filter auf den ngRepeat before the Paginierungsfilter anwenden.

<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>
0
Jonathan Czitkovics

Sie können dies leicht mit der Bootstrap-UI-Direktive tun.

Diese Antwort ist eine Modifikation der Antwort von @ Scotty.NET. Ich habe den Code geändert, da die <pagination>-Direktive jetzt veraltet ist.

Folgender Code generiert die Paginierung:

<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>

Um es funktionsfähig zu machen, verwenden Sie dies in Ihrem Controller:

$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();

Weitere Optionen für die Paginierung finden Sie hier: Bootstrap-UI-Paginierungsrichtlinie

0
Astitva Srivastava

Übersicht: Paginierung mit

 - ng-repeat
 - uib-pagination

Aussicht : 

<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 Controller: 

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();

}]);
0
Riddhi Gohil

Ich wünschte, ich könnte einen Kommentar abgeben, aber ich muss das hier nur lassen: 

Scotty.NETs Antwort und user2176745s Redo für spätere Versionen sind beide großartig, aber beide vermissen etwas, woran meine Version von AngularJS (v1.3.15) bricht: 

ich bin nicht in $ scope.makeTodos definiert. 

Das Ersetzen mit dieser Funktion behebt es daher für neuere Winkelversionen.

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