Pagination on a List Using Ng-Repeat

Pagination on a list using ng-repeat

If you have not too much data, you can definitely do pagination by just storing all the data in the browser and filtering what's visible at a certain time.

Here's a simple pagination example from the list of fiddles on the angular.js Github wiki, which should be helpful:

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

function MyCtrl($scope) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.numberOfPages=function(){
return Math.ceil($scope.data.length/$scope.pageSize);
}
for (var i=0; i<45; i++) {
$scope.data.push("Item "+i);
}
}

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in data | 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 >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>
</div>

Angularjs pagination in ng-repeat

It looks like you are using ui.bootstrap.pagination. The pagination directive keeps track of the current page, but you still have to filter your array. One solution is to ng-repeat over a subset of the array:

<pagination ng-model="currentPage" total-items="tickets.length" items-per-page="5"></pagination>
<div class="alert alert-info" ng-repeat="tic in paged.tickets">
{{tic}}
</div>

and then update that subset whenever the current page changes:

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

$scope.paged = {
tickets: $scope.tickets.slice(begin, end)
}
});

Here is a working demo: http://plnkr.co/edit/oFuE6vjI6t0AHhSVt6Gt?p=preview

Some other (more sophisticated) options are covered in this related question: Pagination on a list using ng-repeat

AngularJS ng-repeat table with pagination

This a classic scope problem.
Your

<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-class="{active: n == currentPage}" ng-click="currentPage = n;">
<a href ng-bind="n + 1">1</a>
</li>

create its own scope and setting currentPage will create a variable in this new scope, not the controller's scope.

Simple and dirty solution :

<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-class="{active: n == currentPage}" ng-click="$parent.currentPage = n;">
<a href ng-bind="n + 1">1</a>
</li>

updated fiddle

I think that you should definitely keep the setPage function (or even better, pass to a named controller).

How to keep ng-repeat's $index count while using angular-ui-bootstrap uib-pagination in angularjs

Can you try something like the below changes in your code as you can check with this fiddler with your example scenario.

Template:

<td>{{ $index + serial }}</td>

Controller:

  $scope.serial = 1;
$scope.$watch('currentPage', function(){
$scope.serial = $scope.currentPage * $scope.itemPage - ($scope.itemPage-1);
});

Pagination with filters using ng-repeat in angular

I create a custom filter to filter the range that you want.

Here's a snippet working:

var app = angular.module('app', ['angular.filter']);
app.controller('mainCtrl', function ($scope) { $scope.currentPage = 1; $scope.pageSize = 3; $scope.pages = [];
$scope.AlphabethicalRange = [ { "StartFrom":"A", "To":"M" }, { "StartFrom":"N", "To":"Z" } ];
$scope.Countries = [ { "Name":"USA" }, { "Name":"Japan" }, { "Name":"France" }, { "Name":"Canada" }, { "Name":"China" } ];
$scope.People = [ { "Id":1, "Name":"Will", "Country":"USA" }, { "Id":2, "Name":"Ed", "Country":"USA" }, { "Id":3, "Name":"Peter", "Country":"China" }, { "Id":4, "Name":"John", "Country":"Japan" }, { "Id":5, "Name":"Alex", "Country":"France" }, { "Id":6, "Name":"Jim", "Country":"France" }, { "Id":7, "Name":"Austin", "Country":"Italy" }, { "Id":8, "Name":"Men", "Country":"France" }, { "Id":9, "Name":"Zike", "Country":"Canada" } ];
$scope.numberPages = Math.ceil($scope.People.length / $scope.pageSize);
$scope.init = function() { for (i = 1; i < $scope.numberPages; i++) { $scope.pages.push(i); } }; $scope.init();});
app.filter('rangeAlphaFilter', function() { return function(items, search) { if (!search || search == ' - ') { return items; } return items.filter(function(element) { return new RegExp('[' + search.replace(/ /g, '') + ']', 'i').test(element.Name[0]); }); }});
<!DOCTYPE html><html ng-app="app">
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script></head>
<body ng-controller="mainCtrl"> <div> <span>Country Filter</span> <select name="countriesSelect" ng-options="c as c.Name for c in Countries" ng-model="selectedCountry"> <option value="">-- Select a country --</option> </select> <br> <span>Alphabetical Filter</span> <select name="AlphabeticalSelect" ng-options="a as a.StartFrom +' - '+ a.To for a in AlphabethicalRange" ng-model="selectedRange"> <option value="">-- Select a range --</option> </select> <ul> <li ng-repeat="person in People | filter: { Country: selectedCountry.Name } | rangeAlphaFilter: selectedRange.StartFrom +' - '+ selectedRange.To" ng-bind="person.Name"></li> </ul> <span>Pagination Numbers</span> <a href="#" ng-repeat="page in pages">{{page}}</a> </div></body></html>

Slice ng-repeat in pagination Angular

Just add the number of items before the indexed one, like this:

<label><h3>Question {{$index + 1 + (currentPage - 1) * itemsPerPage}}</h3></label>


Related Topics



Leave a reply



Submit