Gilberto Quintero Gilberto Quintero - 5 months ago 82
Javascript Question

Pagination with filters using ng-repeat in angular

I am trying to do a pagination using filters.

There is a list with names and countries.

I am trying to filter them by country and also alphabetical range, and then generate the pagination by numbers. I am really stuck with it. any help will be really appreciate it

The alphabetical filter will retrieve the names that start with the the range of letters. For example if you select the first option [A - M] will return the person that their name start within that range of letters

Here is my code. The html is over there. Thanks

http://jsbin.com/cifowatuzu/edit?html,js,output

angular.module('app',['angular.filter'])
.controller('MainController', function($scope) {

$scope.selectedCountry = '';
$scope.currentPage = 1;
$scope.pageSize = 3;
$scope.pages = [];

//This should store {StartFrom and To from selected Range}
$scope.selectedRange = '';

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

Answer

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) {
      return items;
    }    
    return items.filter(function(element) {
      return new RegExp('[' + search.replace(/ /g, '') + ']').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>

PS: To control the pagination, I extremely don't recommend you to do it manually, it gives a lot of work. I recommend you to see my answer in this another question, it's like a "mini" tutorial of how to use the angularUtils-pagination. Check it.

I hope it helps.