Page and order full list in angular

Question

Page and order full list in angular

Navigation

#1 by (1 votes)

0

I have a list of records that I show with ng-repeat that I'm sorting by phone and I'm listing it.

<li ng-repeat="todo in filteredTodos | orderBy:'phone':true">{{todo.phone}}</li>

I need to sort and paginate the list, but when adding the orderBy:'phone':true you only order the records of each page instead of ordering the complete list, I know that it is by the logic of the pager, but I can not find a logic that allow to page and sort the entire list. here the example:

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>

Here the example code similar to the pager I have.

My list has several columns and is obtained by consuming a service which I can not modify, what I have in mind is that you must modify the logic of paging the list and there is same apply the order.

bootstrap angularjs angular-directivas

asked by kradwarrior 06.07.2017 в 15:44

source

1 answer

Error calling a function in jQuery Error exporting report to pdf

score 1 · Accepted Answer

your error is that you are doing the cut of the array and then paginate it the solution is to order it first and then cut the array. You must add the line after loading the Array

$scope.todos=  $filter('orderBy')($scope.todos, 'phone', false);

If you want to sort it by descenting it just change the true by the false

 $scope.todos=  $filter('orderBy')($scope.todos, 'phone', true);

and remove the filter since it was previously ordered

<li ng-repeat="todo in filteredTodos">

the complete example below:

var app = angular.module('todos',['ui.bootstrap']);
app.controller('TodoController', function($scope,$filter) {
      $scope.filteredTodos = []
 ,$scope.currentPage = 1
  ,$scope.numPerPage = 5
  ,$scope.maxSize = 5;
  
  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=20;i++)
    $scope.temp=[
    
       {'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': 'AMOTOROLA XOOM™'}
    ];
$scope.todos=  $filter('orderBy')($scope.temp, 'phone', false);
  };
  $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 ">{{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>

In conclusion You must first ORDER and then PAGE