Combining Filters with Pagination Angularjs

by elenat82

HTML

<script src="https://code.angularjs.org/1.6.6/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<div ng-app="myApp">
  <div ng-controller="someController">
  <div>list.length = {{list.length}}</div>
  <div>currentPage = {{currentPage}}</div>
  <div>itemPage = {{itemPage}}</div>
  <div>maxSize = {{maxSize}}</div>
  <br><br><br><br>
  <table>
        <tbody>
            <tr ng-repeat="item in list | pagination:(currentPage-1)*itemPage | limitTo:itemPage track by $index">
                <td>{{ $index +1 }}</td>
                <td>{{ item.task }}</td>
            </tr>
        </tbody>
    </table>
    <div>
        <ul uib-pagination 
        total-items="list.length" ng-model="currentPage" max-size="maxSize" boundary-links="true" boundary-link-numbers="true" force-ellipses="true" items-per-page="itemPage" first-text="First" last-text="Last" next-text="Next" previous-text="Prev">
        </ul>
    </div>
  </div>
</div>

JavaScript

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

app.controller('someController', function($scope, $filter) {
  $scope.list = [
  {task: "task n. 1"},
  {task: "task n. 2"},
  {task: "task n. 3"},
  {task: "task n. 4"},
  {task: "task n. 5"},
  {task: "task n. 6"},
  {task: "task n. 7"},
  {task: "task n. 8"},
  {task: "task n. 9"},
  {task: "task n. 10"},
  {task: "task n. 11"},
  {task: "task n. 12"},
  {task: "task n. 13"},
  {task: "task n. 14"},
  {task: "task n. 15"},
  {task: "task n. 16"},
  {task: "task n. 17"},
  {task: "task n. 18"},
  {task: "task n. 19"},
  {task: "task n. 20"}
  ];
  
  $scope.currentPage = 1;
  $scope.itemPage = 5;
  $scope.maxSize = 5;
  
});

app.filter('pagination', function () {
  return function (input, start) {
    start = +start;
        if (input) {
            return input.slice(start);
        }
        else {
            return input;
        }
  };
});