Получение следующего и предыдущего набора записей из массива с использованием угловых & pagination

Question

Я придумал this plunker, чтобы показать свою проблему.

Поведение, которое я ищу, заключается в том, что когда пользователь нажимает на стрелку вправо, он переходит на следующую страницу, а стрелка влево - на предыдущую страницу. Если пользователь находится на стр. 10, то при нажатии стрелки вправо изменяется количество страниц, отображаемых на страницах разбиения на страницы с 2-11 и 11, подсвечивается.

Если они снова нажимают на стрелку вправо, это изменяет количество страниц, отображаемых на страницах разбиения на страницы с 3-12 и 12, подсвечивается. Это будет продолжаться до тех пор, пока страница 20 не будет достигнута, а затем не позволит им дальше. Следует также работать в предыдущем направлении также путем уменьшения, если пользователь на странице 1, нажав на стрелку влево, не действует. Надеюсь, это понятно.

HTML:

<ul class="pagination pagination-lg"> 
     <li class="page-item"> 
     <a href="#" ng-click="search($index-1)"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a> 
     </li> 
     <li ng-class="currentPage === $index+1 ? 'active' : ''" ng-repeat="i in getNumber(numberOfPages) track by $index"><a class="page-link" href="#" ng-click="search($index+1)">{{$index+1}}</a></li> 
     <li class="page-item"> 
     <a href="#" ng-click="search($index+1)"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a> 
     </li> 
    </ul> 

Угловые/JS:

$scope.search = function(index){ 
     $scope.currentPage = index; 

     $http.get('https://jsonplaceholder.typicode.com/todos').then(function (response) { 
     var temp = response.data; 
     $scope.data = temp.splice(pageSize * (index-1), 10); 
     }) 
    } 

См this plunker для полного кода. Любая помощь оценивается.

Answer 1

Итак, основной идеей для моего возможного решения было бы сделать массив с номерами страниц вместо того, чтобы пытаться отслеживать индекс массива. Из-за этой идеи я внес некоторые изменения.
Этого решение: https://plnkr.co/edit/d1JhJDNskNEMh0G59b9K?p=preview

Основная логика страницы происходит в getNumber()

$scope.getNumber = function() { 

    //Add elements when increasing currentPage 
    for (var i = 0; i < $scope.currentPage - $scope.pages[$scope.pages.length - 1]; i++) { 
    $scope.pages.shift(); 
    $scope.pages.push($scope.currentPage); 
    } 

    //Add elements when decreasing currentPage 
    for (var i = 0; i < $scope.pages[0] - $scope.currentPage; i++) { 
    $scope.pages.pop(); 
    $scope.pages.unshift($scope.currentPage); 
    } 

    return $scope.pages; 
} 

Этот метод отслеживает массив с номерами страниц и добавляет нумерацию страниц, если CurrentPage больше, чем в прошлом PageNumber в массив и наоборот. Ваша проблема только в логике.

Я добавил весь код ниже, поэтому плункер не нужен.

Сначала Javascript затем HTML

(function() { 
 

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

 
}()); 
 

 
(function(module) { 
 

 
    var demoController = function($http, $scope) { 
 

 
    $http.get('https://jsonplaceholder.typicode.com/todos').then(function(response) { 
 
     $scope.data = response.data; 
 
    }) 
 

 
    var pageSize = 10; 
 
    var totalItems = 200; 
 

 
    $scope.numberOfPages = totalItems/pageSize; 
 
    $scope.currentPage = 0; 
 
    $scope.pages = new Array(pageSize); 
 
    for (var i = 1; i <= pageSize; i++) { 
 
     $scope.pages[i - 1] = i; 
 
    } 
 

 

 
    $scope.getNumber = function() { 
 

 
     //Add elements when increasing currentPage 
 
     for (var i = 0; i < $scope.currentPage - $scope.pages[$scope.pages.length - 1]; i++) { 
 
     $scope.pages.shift(); 
 
     $scope.pages.push($scope.currentPage); 
 
     } 
 

 
     //Add elements when decreasing currentPage 
 
     for (var i = 0; i < $scope.pages[0] - $scope.currentPage; i++) { 
 
     $scope.pages.pop(); 
 
     $scope.pages.unshift($scope.currentPage); 
 
     } 
 

 
     return $scope.pages; 
 
    } 
 

 
    $scope.search = function(index) { 
 
     if (index <= 0 || index > totalItems/pageSize) return; 
 
     $scope.currentPage = index; 
 

 
     $http.get('https://jsonplaceholder.typicode.com/todos').then(function(response) { 
 
     var temp = response.data; 
 
     $scope.data = temp.splice(pageSize * (index - 1), 10); 
 
     }) 
 

 
    } 
 

 
    }; 
 

 
    module.controller("demoController", demoController); 
 

 
}(angular.module("app")));

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 

 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="app.js"></script> 
 
    <script src="ctrl.js"></script> 
 
    </head> 
 

 
    <body ng-app="app"> 
 
    <div class="container"> 
 
     <h1>Hello Plunker!</h1> 
 
     
 
     <div ng-controller="demoController" ng-init="search(1)"> 
 
     
 
     <div ng-repeat="item in data"> 
 
      <div>{{item.id}} {{item.title}}</div> 
 
     </div> 
 
     
 
     <ul class="pagination pagination-lg"> 
 
      <li class="page-item"> 
 
      <a href="#" ng-click="search(currentPage-1)"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a> 
 
      </li> 
 
      <li ng-class="currentPage === i ? 'active' : ''" ng-repeat="i in getNumber() track by $index"><a class="page-link" href="#" ng-click="search(i)">{{i}}</a></li> 
 
      <li class="page-item"> 
 
      <a href="#" ng-click="search(currentPage+1)"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a> 
 
      </li> 
 
     </ul> 
 
     
 
     </div> 
 
     
 
    </div> 
 
    </body> 
 

 
</html>