Tengo una lista de registros que muestro con ng-repeat
que estoy ordenando por phone y la estoy paginando.
<li ng-repeat="todo in filteredTodos | orderBy:'phone':true">{{todo.phone}}</li>
Necesito ordenar y paginar la lista, pero al adicionar el orderBy:'phone':true
solo se ordena los registros de cada pagina en vez de ordenar la lista completa, tengo claro que es por la lógica del paginador, pero no encuentro una lógica que me permita paginar y ordenar toda la lista completa.
aqui el ejemplo:
var app = angular.module('todos',['ui.bootstrap']);
app.controller('TodoController', function($scope) {
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 5
,$scope.maxSize = 5;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=20;i++)
$scope.todos=[
{'phone': 'Nexus S'},
{'phone': 'Motorola XOOM™ with Wi-Fi'},
{'phone': 'MOTOROLA XOOM™'},
{'phone': 'Nexus S'},
{'phone': 'Motorola XOOM™ with Wi-Fi'},
{'phone': 'eeeeee XOOM™'},
{'phone': 'Nexus S'},
{'phone': 'Motorola XOOM™ with Wi-Fi'},
{'phone': 'MOTOROLA XOOM™'},
{'phone': 'Nexus S'},
{'phone': 'ffffff XOOM™ with Wi-Fi'},
{'phone': 'MOTOROLA XOOM™'},
{'phone': 'Nexus S'},
{'phone': 'Motorola XOOM™ with Wi-Fi'},
{'phone': 'MOTOROLA XOOM™'},
{'phone': 'Nexus S'},
{'phone': 'Motorola XOOM™ with Wi-Fi'},
{'phone': 'MOTOROLA XOOM™'}
];
};
$scope.makeTodos();
$scope.numPages = function () {
return Math.ceil($scope.todos.length / $scope.numPerPage);
};
$scope.$watch('currentPage + numPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
});
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
<body ng-app="todos" ng-controller="TodoController">
<h1>Todos</h1>
<h4>{{todos.length}} remain</h4>
<ul>
<li ng-repeat="todo in filteredTodos | orderBy:'phone':true">{{todo.phone}}</li>
</ul>
<div data-pagination="" data-num-pages="numPages()"
data-current-page="currentPage" data-max-size="maxSize"
data-boundary-links="true"></div>
</body>
Aqui el codigo de ejemplo similar del paginador que tengo.
Mi lista tiene varias columnas y se obtiene consumiendo un servicio el cual no puedo modificar, lo que tengo en mente es que se debe modificar la lógica de paginar la lista y hay mismo aplicar el orden.