Уменьшить числа нумерации страниц

Question

Я построил нумерацию страниц с использованием Materialise CSS и AngularJS.См. Изображение ниже.

У меня есть файл контроллера, который содержит массив объектов, на основе которых определяется количество страниц.

Controller.js

app.controller("products", ["$scope", function($scope) {
    $scope.products = [{foo: 'bar'},{},{}..{}];
    $scope.currentPage = 0;
    $scope.pageSize = 10; // number of products to show on a page
    $scope.numberOfPages = Math.ceil($scope.prods.length/$scope.pageSize);
    $scope.pages = function(number) {
        return new Array(number);
    }
    $scope.setCurrentPage = function(index) {
        $scope.currentPage = index;
    }
}]);

HTML:

<ul class="pagination">
    <li ng-repeat="x in pages(numberOfPages) track by $index" ng-click="setCurrentPage($index)" ng-class="{ 'active': $index === currentPage }"><a href="#!">{{$index+1}}</a></li>
</ul>

Теперь я хочу, чтобы разбиение на страницы было таким, как показано на рисунке.Первый и последний номера страниц остаются всегда видимыми, но выбранный номер страницы виден только вместе с соседними номерами страниц.Например, для 2 -> 1,2,3 и для 7 -> 6,7,8 и т. Д.

Пожалуйста, помогите.

Answer 1

Ниже приведен рабочий фрагмент, но сначала я выделю наиболее важные аспекты этого вопроса.

Общая идея заключается в использовании ng-show для отображения или скрытия каждой кнопки ссылки на страницу в частивиджет нумерации страницЛогика для этого основана на: странице, которую представляет ссылка, текущей странице и размере окна ссылки на страницу (в вашем случае это просто один).

Единственная другая сложная часть - это эти эллипсывам требуется.Я предлагаю здесь реализовать их как псевдоэлементы.Эти псевдоэлементы отображаются или скрываются в зависимости от применения классов CSS, которые могут быть применены только к элементам ссылки на первую или последнюю страницу виджета пагинации.не имеет отношения к желаемому поведению нумерации страниц.

angular
  .module('app', [])
  .controller('products', function ($scope) {
    $scope.currentPage = 0;
    $scope.pageCount = 100;
    $scope.pageLinkWindowSize = 1;
    $scope.pages = function (pageCount) {
      return new Array(pageCount);
    };
    $scope.setCurrentPage = function (index) {
      $scope.currentPage = index;
    };
    $scope.isPageLinkVisible = function (index) {
      if (index === 0 || index === $scope.pageCount - 1) {
        return true;
      } else {
        return index >= Math.max($scope.currentPage > $scope.pageCount - 1 - $scope.pageLinkWindowSize ? $scope.pageCount - 1 - $scope.pageLinkWindowSize * 2 : $scope.currentPage - $scope.pageLinkWindowSize, 0) &&
               index <= Math.min($scope.currentPage < $scope.pageLinkWindowSize ? $scope.pageLinkWindowSize * 2 : $scope.currentPage + $scope.pageLinkWindowSize, $scope.pageCount - 1);
      }
    };
    $scope.hasPagesAfter = function (index) {
      return index === 0 && ($scope.currentPage - $scope.pageLinkWindowSize) > 1;
    };
    $scope.hasPagesBefore = function (index) {
      return index === ($scope.pageCount - 1) && ($scope.pageCount - 1) - $scope.currentPage - $scope.pageLinkWindowSize > 1;
    };
  });

ul {
  list-style-type: none;
}
li {
  float: left;
  margin-right: 1em;
}
.pages-after::after {
  content: '...';
  display: inline;
  margin-left: 1em;
}
.pages-before::before {
  content: '...';
  display: inline;
  margin-right: 1em;
}

<div ng-app="app" ng-controller="products">
  <div>
    <label>
      Window Size
      <input type="number" ng-model="pageLinkWindowSize" min="1" />
    </label>
  </div>
  <ul>
    <li
      ng-repeat="page in pages(pageCount) track by $index"
      ng-click="setCurrentPage($index)"
      ng-show="isPageLinkVisible($index)"
      ng-class="{
        'pages-after': hasPagesAfter($index),
        'pages-before': hasPagesBefore($index),
      }">
      <a href="#!">{{ $index + 1 }}</a>
    </li>
  </ul>
</div>
<script src="https://unpkg.com/angular@1.7.4/angular.min.js"></script>