使用 angularJs 进行分页、排序和过滤，小问题

【问题标题】：Paging, sorting and filtering with angularJs, small issue使用 angularJs 进行分页、排序和过滤，小问题
【发布时间】：2017-07-11 20:34:50
【问题描述】：

我有一个烦人的问题，当放置分页时，尝试进行排序或过滤很难完全起作用，互联网上有很多例子，我正在写因为我无法解决最后两个问题。对于这个非常常见的问题，我深表歉意。

我遇到的两个问题是：

• 我有 11 个元素的数组，分页配置为 5 行，这意味着我希望有 3 个页面，而我只有 2 个。

• 如果我在过滤器的文本框中输入一些内容，让我们说 1 或 2 行，如果最终我单击一个标题列进行排序，它会删除过滤器。

  李>

我的印象是，有一种简单的方法可以在不重新发明轮子的情况下完成所有这些操作？

这是我的控制器：

var app = angular.module('app', ['ngAnimate', 'ngSanitize', 
'ui.bootstrap']);

 app.controller('controller', function($scope, $filter) {

 //Variable initialization
 //$scope.filteredArray = [];
 $scope.currentPage = 0;
 $scope.numPerPage = 5;
 $scope.maxSize = 8;
 $scope.arrayFilter = '';

 $scope.sortType = ''; // set the default sort type
 $scope.sortReverse = true; // set the default sort order

 //Creates the items
 $scope.arrayList = [{
  Id: 1,
  Name: 'Marcos'
 }, {
  Id: 2,
  Name: 'Marcelo'
 }, {
  Id: 3,
  Name: 'Ben'
 }, {
  Id: 4,
  Name: 'Stuart'
 }, {
  Id: 5,
  Name: 'Jhon'
 }, {
  Id: 6,
  Name: 'Paul'
 }, {
  Id: 7,
  Name: 'Leticia'
 }, {
  Id: 8,
  Name: 'Ramon'
 }, {
  Id: 9,
  Name: 'Jose'
 }, {
  Id: 10,
  Name: 'Ronaldo'
 }, {
  Id: 11,
  Name: 'Test'
 }];

 //$scope.filteredArray = $scope.arrayList.slice(0, 5);
 $scope.ArrayLength = $scope.arrayList.length;
 $scope.filteredArray = $scope.arrayList.slice(0, $scope.numPerPage);

 $scope.onPageChange = function() {
 //$scope.filterFunction();
 $scope.begin = (($scope.currentPage - 1) * $scope.numPerPage);
 $scope.end = $scope.begin + $scope.numPerPage;
 $scope.filteredArray = $scope.arrayList.slice($scope.begin, $scope.end);
 }

 $scope.sort = function(field) {
   $scope.sortType = field;
   $scope.sortReverse = !$scope.sortReverse;
   var sorted = $filter('orderBy')($scope.arrayList, field, 
    $scope.sortReverse);
   $scope.arrayList = sorted;
   $scope.filteredArray = sorted.slice(0, 5);
 }

 $scope.filterFunction = function() {

 var filtered = $filter('filter')($scope.arrayList, $scope.arrayFilter);

 // $scope.arrayList = filtered;
 $scope.ArrayLength = filtered.length;

 //perform the paging
 $scope.filteredArray = filtered.slice(0, 5);
 };

});

这是我的笨蛋。 https://plnkr.co/edit/mQUSVxj3PWtZWL0tYD2z?p=preview

谢谢！

【问题讨论】：

• 认为你需要在指令中使用items-per-page - 我还想提到你的代码正在做很多过滤，而 Angular 可以很容易地为你做。 docs.angularjs.org/guide/filter。使用 orderBy 和 filter 在这个 plunk embed.plnkr.co/YgzkybXPzIUtyJa92pJf 中查看 tr ng-repeat 没有必要用过滤方法弄乱控制器
• 谢谢，您的分页不起作用。
• 我喜欢你的逻辑，如果这可行，那就太棒了，主要是这部分看起来很棒：ng-repeat="item in filteredArray = (arrayList | orderBy:orderBy:reverse | filter:filters )" 但分页不起作用！
• 这一行是对您建议的改进，但最后一件事是，当您执行过滤器时，它不会更新页数： ，这里是 plunker plnkr.co/edit/rYVeMt5WdG3T7z4LHHM3?p=preview
• 试试这个 - 它非常接近并且允许搜索整个arrayList，而不仅仅是您所在页面的项目。注意在js中使用memo对象，ng-repeat中的limitTo:5和uib-pagination指令plnkr.co/edit/KYCp0PgUjYnESH0ceTIl?p=preview中的total-items逻辑