I'm using angular 1.5.5 and angular-bootstrap 1.3.3 to paginate, sort and filter my data on a table via ng-repeat, but it is only sorting and filtering on the current page and not on all the pages.
app.js
var app = angular.module("sac.app", ['ngResource', 'ui.router', 'ui.bootstrap']);
app.config(function config($stateProvider, $urlRouterProvider) {
'use strict';
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'views/home.html'
})
.state('patients', {
url: '/patients',
controller: 'PatientController',
templateUrl: 'views/patients.html'
});
app.controller('PatientController', ['$scope', 'patients', function ($scope, patients) {
patients.success(function (data) {
$scope.patients = data;
$scope.sortType = 'name';
$scope.sortReverse = true;
$scope.search = '';
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.totalItems = $scope.patients.length;
$scope.maxSize = 5;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.patients.indexOf(value);
return (begin <= index && index < end);
};
})
}]);
app.factory('patients', ['$http', function ($http) {
return $http.get('api/patients')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
patients.html
<form>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Ingrese el Nombre o Apellido del Paciente" ng-model="search" autofocus>
<div class="input-group-btn">
<a ui-sref="patient.create" class="btn btn-primary"><i class="fa fa-plus"></i> Nuevo Paciente</a>
</div>
</div>
</form>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>
<a href="" ng-click="sortType = 'name'; sortReverse = !sortReverse">
Nombre Completo
<span ng-show="sortType == 'name'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'identity'; sortReverse = !sortReverse">
Identificación
<span ng-show="sortType == 'identity'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'age'; sortReverse = !sortReverse">
Edad
<span ng-show="sortType == 'age'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'telephone'; sortReverse = !sortReverse">
Teléfono
<span ng-show="sortType == 'telephone'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'email'; sortReverse = !sortReverse">
Email
<span ng-show="sortType == 'email'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="patient in patients | orderBy:sortType:sortReverse | filter:paginate | filter:search">
<td>{{ patient.name }} {{ patient.last_name }}</td>
<td>{{ patient.identity }}</td>
<td>{{ patient.age }}</td>
<td>{{ patient.telephone }}</td>
<td>{{ patient.email }}</td>
</tr>
</tbody>
</table>
<uib-pagination first-text="Primera" last-text="Última" next-text=">" previous-text="<"
total-items="totalItems" items-per-page="numPerPage" max-size="maxSize"
ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>