angleJsを使用したページング、ソート、フィルタリング、小さな問題

Question

私はページングをするときにソートやフィルタリングを行うと全体的に作業が難しくなるという厄介な問題を抱えています。私は最後の2つの問題を解決することができないためです。私はこの非常に一般的な質問をお詫び申し上げます。私が持っている

2つの問題がある：

• 私は3ページを持つことを期待していますを意味し、11個の要素の配列と5行を保持するように構成されたページングを持っていると私は唯一の2

を持っています

• フィルタのテキストボックスに何かを入力すると、1行または2行となります。結局、1つのヘッダー列をクリックしてソートすると、フィルタが削除されます。

私の印象は、ホイールを改革することなくこれらすべてを簡単に行うことができるという印象がありますか？

これは私のコントローラです：

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); 
}; 

}); 

は、これが私のplunkerです。 https://plnkr.co/edit/mQUSVxj3PWtZWL0tYD2z?p=preview

ありがとうございます！

Answer 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()機能では、あなたが正しいとあなたのアレイをスライスする必要がありますフィルタリングされた配列の長さ：

$scope.filteredArray = sorted.slice(0, $scope.arrayList.length);