Question

我有这个烦人的问题，当进行分页，并尝试进行排序或过滤时很难完全工作，互联网上有很多例子，我写的因为我无法解决最后两个问题的问题。我为这个非常常见的问题道歉。

我遇到的两个问题是：

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

谢谢！

Answer 1

这两项更改应解决您的问题：

在模板中，您需要使用items-per-page的{{1}}指令：

uib-pagination

在<ul uib-pagination items-per-page="5" direction-links="false" boundary-links="true" total-items="ArrayLength" ng-model="currentPage" max-size="maxSize" ng-change="onPageChange()">函数中，您需要使用正确长度的过滤数组切割数组：

$scope.sort()

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

1 个答案: