javascript - 如何重新排序 angularjs ngTable 分页？

Question

我在当前项目中使用 angularjs 1.5.7。我在这个项目中几乎所有地方都使用 ngTable。最近我被要求改变我们在每张桌子上显示分页的方式。我们目前的格式：

我们想要：

这是我的代码片段：

<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>

不幸的是，我无法按以下顺序获取它：First>Prev>Next>Last。我得到的是：

我想知道是否有办法强制它按我想要的顺序出现？

谢谢

标签： javascriptangularjspaginationngtable

Answer 1

鉴于似乎没有任何方法可以使用本机属性对页面集合进行排序，您可以轻松地创建自己的函数来执行此操作。$scope这是您可以传递给orderBy指令的 -level 函数的示例。这不是最优雅的事情，但本质上我正在将文本转换为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>