Javascript 限制AngularJS中的分页

我已使用此指令构建了自定义分页：

app.directive('postsGenreLink', function() {
    return {
        restrict: 'EA',
        templateUrl: myLocalized.partials + 'posts-genre-link.html',
        controller: ['$scope', '$element', '$routeParams', function($scope, $element, $routeParams) {
            var currentGenrePage = (!$routeParams.page) ? 1 : parseInt($routeParams.page),
                linkPrefix = (!$routeParams.slug) ? 'page/' : 'genre/' + $routeParams.slug + '/page/';

            $scope.postsGenreLink = {
                prevLink: linkPrefix + (currentGenrePage - 1),
                hopLink: linkPrefix,
                nextLink: linkPrefix + (currentGenrePage + 1),
                sep: (!$element.attr('sep')) ? '|' : $element.attr('sep'),
                prevLabel: (!$element.attr('prev-label')) ? 'Previous Page' : $element.attr('prev-label'),
                nextLabel: (!$element.attr('next-label')) ? 'Next Page' : $element.attr('next-label'),
                hopLabel: (!$element.attr('Jump')) ? 'Jump' : $element.attr('Jump')
            };
        }]
    };
});

这是我的

帖子类型链接.html

：

<nav aria-label="...">
  <ul class="pagination pt-3">
    <li class="page-item" ng-class="{'disabled' : currentGenrePage == 1}">
      <a class="page-link" href="{{postsGenreLink.prevLink}}">Previous</a>
    </li>
    <li ng-repeat="i in [].constructor(totalPages) track by $index" class="page-item" ng-class="{'active' : currentGenrePage == $index + 1}"><a class="page-link" href="{{postsGenreLink.hopLink+($index + 1)}}">{{$index + 1}}</a></li>

    <li class="page-item" ng-class="{'disabled' : currentGenrePage >= totalPages}">
      <a class="page-link" href="{{postsGenreLink.nextLink}}">Next</a>
    </li>
  </ul>
</nav>

totalPages

是控制器

$scope.totalPages=parseInt（headers（'X-WP-totalPages'））中定义的范围变量并且它基本上包含页数

这就是它的样子：


我的问题是当这个值很高时；我不想显示200-300页，我只想显示
currentGenePage
和前后两页，用经典的点来强调还有更多的页面。如何处理这个问题？
如果您想从相对简单的事情开始，我在这里写了一个分页指令：


用法



如果您想要更健壮的测试/广泛使用，ui引导程序中还有一个分页指令

这就是我如何“以图形方式”解决的问题（如果当前页面加1低于
$index
或当前页面低于
$index
的3，则隐藏数字）

<nav aria-label="...">
  <ul class="pagination pt-3">
    <li class="page-item" ng-class="{'disabled' : currentGenrePage == 1}">
      <a class="page-link" href="{{postsGenreLink.prevLink}}">Previous</a>
    </li>
    <li class="page-item disabled" ng-class="{'notshow' : currentGenrePage == 1 || currentGenrePage == 2 || currentGenrePage == 3}">
      <a class="page-link" href="">...</a>
    </li>
    <li ng-repeat="i in [].constructor(totalPages) track by $index" class="page-item" ng-class="{'active' : currentGenrePage == $index + 1, 'notshow' :  currentGenrePage + 1 < $index || currentGenrePage - 3 > $index}"><a class="page-link" href="{{postsGenreLink.hopLink+($index + 1)}}">{{$index + 1}}</a></li>
    <li class="page-item disabled" ng-class="{'notshow' : currentGenrePage == totalPages || currentGenrePage == totalPages -1 || currentGenrePage == totalPages - 2}">
      <a class="page-link" href="">...</a>
    </li>
    <li class="page-item" ng-class="{'disabled' : currentGenrePage >= totalPages}">
      <a class="page-link" href="{{postsGenreLink.nextLink}}">Next</a>
    </li>
  </ul>
</nav>

您好@shaunhusain，我已经设置了适合我的指令的分页，我想修改我的分页，以获得预期的行为。也许我可以在ng repeat中添加一个过滤器，看看$index是否与当前页面+/-2不同，不要显示它。您当然可以尝试其他方法来完成此操作，但如果您愿意的话要有第一个/最后一个按钮，可以选择显示等等。就像你在大多数分页组件上看到的那样，那么它就更复杂了，我认为你可以在几个过滤器中处理。基本上是“genPagesArray”函数是所有逻辑根据元素总数、每页元素数、要显示的最大按钮数等来决定需要显示哪些内容的地方。因此很难在几个过滤器中捕获所有这些内容。我的代码中的所有其他内容都只是处理程序或观察程序。@GoingSolo如果您只想复制我的并清理它，也可以我非常感谢对它的任何反馈/更新，我计划在我的网站上发布这篇文章作为一篇博客文章的示例，所以欢迎更改。第一个和最后一个按钮不是必需的，但它们可以硬编码：第一页总是1，最后一页总是等于总页面。我可以在repeat:ng类中添加类似的内容=“{'notshow'：$index+2==currentPages | |$index-2==currentPages}”其中.notshow{display:none；}“一切都应该尽可能简单，但不能简单。”-爱因斯坦……不用担心，如果它能完成任务，越简单越好：）是的，我最初尝试过这样的事情，我现在看到的问题是当第一页仍然在视图中，比如说你已经选择了第2页，它不应该在1之前显示…，这里的另一个问题是，当你在列表的开始或结束时，分页控件会改变大小。可以解释这些事情，但如果它涵盖了您需要的用例，那么这肯定是一个更简单的选择。您是对的，我已将此添加到初始点：
|currentGenrePage==2 | | currentGenrePage==3
和最终点
| currentGenrePage==totalPages-1 | | currentGenrePage==totalPages-2
，因为agination在当前页面前后使用2个数字。
<div>
    <span class="pagination-button" ng-click="firstPage()"> |< </span><span class="pagination-button" ng-click="prevPage()"> << </span><span class="pagination-button" ng-click="changeSelectedPage(page)" ng-class="{'selected':model.selectedPage == page}"
      ng-repeat="page in pages track by $index">
    {{(page+1)}}
  </span><span class="pagination-button" ng-click="nextPage()"> >> </span><span class="pagination-button" ng-click="lastPage()"> >| </span>
  </div>

.pagination-button {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  display: inline-block;
  width: 20px;
  text-align: center;
  margin-right: 2px;
  /* Disable Text Selection */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.pagination-button:hover {
  background-color: #ddffdd;
  cursor: pointer;
}

.pagination-button:active,
.pagination-button.selected {
  background-color: #ccffaa;
}

  <paging-display num-per-page="5" max-buttons="{{myctrl.maxPageButtons}}" total-elements="{{myctrl.filtered.length}}" start-at="myctrl.startAt">
  </paging-display>

<nav aria-label="...">
  <ul class="pagination pt-3">
    <li class="page-item" ng-class="{'disabled' : currentGenrePage == 1}">
      <a class="page-link" href="{{postsGenreLink.prevLink}}">Previous</a>
    </li>
    <li class="page-item disabled" ng-class="{'notshow' : currentGenrePage == 1 || currentGenrePage == 2 || currentGenrePage == 3}">
      <a class="page-link" href="">...</a>
    </li>
    <li ng-repeat="i in [].constructor(totalPages) track by $index" class="page-item" ng-class="{'active' : currentGenrePage == $index + 1, 'notshow' :  currentGenrePage + 1 < $index || currentGenrePage - 3 > $index}"><a class="page-link" href="{{postsGenreLink.hopLink+($index + 1)}}">{{$index + 1}}</a></li>
    <li class="page-item disabled" ng-class="{'notshow' : currentGenrePage == totalPages || currentGenrePage == totalPages -1 || currentGenrePage == totalPages - 2}">
      <a class="page-link" href="">...</a>
    </li>
    <li class="page-item" ng-class="{'disabled' : currentGenrePage >= totalPages}">
      <a class="page-link" href="{{postsGenreLink.nextLink}}">Next</a>
    </li>
  </ul>
</nav>

.notshow {
  display:none;
}