Как изменить порядок нумерации страниц angularjs? - PullRequest
Новая
       14

Как изменить порядок нумерации страниц angularjs?

0 голосов
/ 16 мая 2018

Я использую angularjs 1.5.7 в моем текущем проекте.Я использую ngTable почти везде в этом проекте.В последнее время меня попросили изменить способ отображения страниц в верхней части каждого стола.Наш текущий формат:

enter image description here

Мы хотим иметь:

enter image description here

Вот мой фрагмент кода: 

<ul class="pagination">
    <li ng-class="{'disabled': !page.active}" ng-repeat="page in pages" ng-switch="page.type">
        <a ng-switch-when="first" ng-click="params.page(page.number)" href="" translate>TABLE.FIRST</a>
        <a ng-switch-when="prev" ng-click="params.page(page.number)" href="" translate>TABLE.PREVIOUS</a>
        <a ng-switch-when="next" ng-click="params.page(page.number)" href="" translate>TABLE.NEXT</a>
        <a ng-switch-when="last" ng-click="params.page(page.number)" href="" translate>TABLE.LAST</a>
    </li>

    <li ng-if="params.pages < 2" ng-class="{'disabled':true}" ng-repeat="n in ['«','1','»']">
        <a type="button" ng-click="" href="" ng-bind="n"></a>
    </li>
</ul>

К сожалению, я не могу получить его в следующем порядке: Первый> Предыдущий> Следующий> Последний.Вместо этого я получаю: enter image description here

Мне было интересно, есть ли способ заставить его отображаться в нужном мне порядке?

Спасибо

1 Ответ

0 голосов
/ 18 мая 2018

Учитывая, что, похоже, нет никакого способа сортировать коллекцию страниц с использованием собственных свойств, вы можете легко создать свою собственную функцию для этого. Вот пример функции $scope -уровня, которую вы можете передать директиве orderBy. Это не самая элегантная вещь, но по сути я конвертирую текст page.type в числовой эквивалент, чтобы позволить orderBy сортировать в нужном вам порядке.

Обновление : я добавил список без orderBy, чтобы продемонстрировать, что он действительно выполняет сортировку при использовании orderBy. 

angular.module('app', [])
  .controller('ctrl', ($scope) => {
    $scope.orderPages = (page) => {
      switch (page.type) {
        case 'first':
          return 1;
        case 'prev':
          return 2;
        case 'next':
          return 3;
        case 'last':
          return 4;
      }
    }

    $scope.pages = [{
      type: 'last',
      text: '>>'
    }, {
      type: 'first',
      text: '<<'
    }, {
      type: 'next',
      text: '>'
    }, {
      type: 'prev',
      text: '<'
    }];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  Without orderBy:
  <ul>
    <li ng-repeat="page in pages">{{page.text}}</li>
  </ul>
  
  With orderBy:
  <ul>
    <li ng-repeat="page in pages | orderBy: orderPages">{{page.text}}</li>
  </ul>
</div>
...