Question

例如，我的页面中有30页，我想将它们限制为五页？例如，当我进入页面5.我希望看到这样的。 << 5 6 7 8 9 >>

以及如何突出显示我当前的分页页面？

这里是我如何迭代我的分页。

.pagination.clearfix
            | &nbsp;
            a.page ng-href="{{ ctrl.turnToPage(ctrl.current_page - 1) }}" ng-if="ctrl.search.meta.prev_page | valPresent" «
            a.page ng-href="/clients?page={{$index + 1}}" ng-show="ctrl.urlChecker2" ng-repeat=" page in getNumber(number) track by $index"
              | {{$index+1}}
            a.page ng-href="{{ctrl.turnToPage($index + 1)}}" ng-show="ctrl.urlChecker" ng-repeat=" page in getNumber(number) track by $index"
              strong
              | {{$index+1}}
            a.page href="{{ ctrl.turnToPage(ctrl.current_page + 1) }} " ng-if="ctrl.search.meta.next_page | valPresent" »
            | &nbsp;

感谢快速回复的欢呼声。

Answer 1

要突出显示当前页面，您可以使用ngClass。

像这样：ng-class={active: <condition for active page>}

请参阅下面的代码段中的完整示例。

limitTo

要限制要显示的页面，有两种解决方案：使用limitTo仅使用数组的切片。像这样：

a.page ng-href="{{ctrl.turnToPage($index + 1)}}" ng-show="ctrl.urlChecker" ng-repeat=" page in getNumber(number):limitTo:5:startIndex() track by $index"

startIndex将是一个返回数组第一个索引的函数（参见下文，在snipet中获取一个工作示例）。

[]。使用$ index

的构造函数

为了避免在值中构建索引为+ 1的转储页数组，可以使用[] .constructor构建一个可直接在表达式中使用的空数组。然后，使用$ index来确定页面。

使用 []。constructor 解决方案的用例的简单示例（html / es6）：

const myApp = angular.module('myApp', []);

myApp.controller('PaginationController', () => {
  const vm = this;

  vm.pagesCount = 10
  vm.pagesToDisplay = 5;
  vm.currentPage = 1;
  
  vm.next = () => {
    return vm.currentPage = Math.min(vm.pagesCount, vm.currentPage + 1)
  }

  vm.prev = () => {
    return Math.max(1, vm.currentPage - 1)
  }

  vm.startIndex = () => {    
    if( vm.currentPage > ((vm.pagesToDisplay / 2) + 1 )) {
      if ((vm.currentPage + Math.floor(vm.pagesToDisplay / 2)) > vm.pagesCount) {
        return vm.pagesCount - vm.pagesToDisplay + 1;
      }
      return vm.currentPage - Math.floor(vm.pagesToDisplay / 2);
    }    
    return 1;
  }

  return vm;
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="PaginationController as $ctrl">
    <div>currentPage : {{$ctrl.currentPage}}/{{$ctrl.pagesCount}}</div>
    <span ng-click="$ctrl.currentPage = $ctrl.prev()">prev</span>
    <span ng-click="$ctrl.currentPage = $ctrl.startIndex() + $index" ng-class="{active: ($ctrl.startIndex() + $index) == $ctrl.currentPage}" ng-repeat="_page in [].constructor($ctrl.pagesToDisplay) track by $index">{{$ctrl.startIndex() + $index}}</span>
    <span ng-click="$ctrl.currentPage = $ctrl.next()">next</span>
  </div>
</body>

对于您的ng-href行为 将上面的代码改为：

<span ng-href="/clients?page={{$ctrl.prev()}}">prev</span>
<span ng-href="/clients?page={{$ctrl.startIndex() + $index}}" ng-class="{active: ($ctrl.startIndex() + $index) == $ctrl.currentPage}" ng-repeat="_page in [].constructor($ctrl.pagesToDisplay) track by $index">{{$ctrl.startIndex() + $index}}</span>
<span ng-href="/clients?page={{$ctrl.next()}}">next</span>

将我的分页限制为五，以及如何突出显示当前的分页页面

1 个答案:

limitTo

[]。使用$ index