搜索过滤器不适用于使用Angularjs的延迟加载分页的完整列表

Question

我有一个表格列表，懒惰加载分页 - 一次只有5个项目。排序和分页工作正常，甚至搜索也工作但只有当前页面。总列表大小是788，当用户点击下一页时，另外5个被加载等。但是我也希望有一个选项来搜索完整列表中的项目 - 而不是懒惰列表。 我的HTML：

<div class="row">   
<div class="col-lg-12 col-md-12 col-sm-12" ba-panel ba-panel-title="Requirement Details" ba-panel-class="with-scroll" >
<form class="form-inline">
<div class="form-group">
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form> 
<div class="horizontal-scroll">
<div  ng-init="reqTableData(1)"> </div>
<table class="table" >
<thead>
<tr class="sortable ">
<th style="width:5%" ng-click="sort('reqID',1)"> ID
<span class="glyphicon sort-icon" ng-show="sortBy=='reqID'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('reqName',1)">Name
<span class="glyphicon sort-icon" ng-show="sortBy=='reqName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:20%" ng-click="sort('description',1)">Description
<span class="glyphicon sort-icon" ng-show="sortBy=='description'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:10%" ng-click="sort('reqType',1)">Type
<span class="glyphicon sort-icon" ng-show="sortBy=='reqType'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('creationTime',1)">Created On
<span class="glyphicon sort-icon" ng-show="sortBy=='creationTime'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:20%" ng-click="sort('status',1)">Status
<span class="glyphicon sort-icon" ng-show="sortBy=='status'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('priority',1)">Priority
<span class="glyphicon sort-icon" ng-show="sortBy=='priority'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
<th style="width:15%" ng-click="sort('lastModified',1)">Modified On
<span class="glyphicon sort-icon" ng-show="sortBy=='lastModified'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
</span>
</th>
</tr>
</thead>
<tbody >
<tr dir-paginate="item in reqTableDetails|orderBy:sortBy:reverse|filter:search|itemsPerPage: 5"  total-items="reqdata">
<td style="width:5%">{{item.reqID}}</td>
<td  style="width:15%" class="trim-info" title="{{item.reqName}}">{{item.reqName|limitTo:10}}{{item.reqName.length>10 ? '...' : ''}}</td>
<td  style="width:20%" class="trim-info" title="{{item.description}}">{{item.description|limitTo:25}}{{item.description.length>25 ? '...' : ''}}</td>
<td style="width:10%">{{item.reqType}}</td>
<td style="width:15%">{{item.creationTime | date:'MM/dd/yyyy'}}</td>
<td style="width:20%">{{item.status}}</td>
<td style="width:15%">{{item.priority}}</td>
<td style="width:15%">{{item.lastModified | date:'MM/dd/yyyy'}}</td>     
</tr>
</tbody>
</table>
<dir-pagination-controls directions-links="true"
boundary-links="true"
on-page-change="reqpageChangedLevel(newPageNumber)"></dir-pagination-controls> 
</div>
</div>
</div>

Controller.js

$scope.reqpageChangedLevel=function(pageno){
$rootScope.pageno = pageno;

if($rootScope.domain == null || $rootScope.domain == null || $rootScope.domain == ""){
{
if( $scope.sortBy=="")
{
$scope.reqTableData ($rootScope.pageno) ;
}else
{
$scope.sortedtable($scope.sortBy,$rootScope.pageno,$scope.reverse);
}
}
}
else
{
$scope.level1 = $rootScope.domain ;
$scope.level2 = $rootScope.project ;
$scope.level3 = $rootScope.release  ;
if( $scope.sortBy=="")
{
$scope.reqtabledataLevel($scope.level1,$scope.level2,$scope.level3,$rootScope.pageno);
}else
{
$scope.sortedtableLevel($scope.level1,$scope.level2,$scope.level3,$scope.sortBy,$rootScope.pageno,$scope.reverse);
}
}
};

var vm = this;
vm.total_count = 0;
$scope.itemsPerPage = 5; 

// Table on-load
$scope.reqTableData = function(start_index){
$scope.index=start_index;
$http.get("./rest/requirementServices/reqTableDetails?&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index).success(function (response) {
$scope.reqTableDetails = response;
}) ; 
};   
// Table on drop down change with level id
$scope.reqtabledataLevel = function(level1,level2,level3,start_index){
$scope.index = start_index;

$scope.smartTablePageSize = 5;
$http.get("./rest/requirementServices/reqTableDetailsLevel?level1="+level1+"&level2="+level2+"&level3="+level3+"&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index).success(function (response) {
$scope.reqTableDetails = response;  
}) ; 
}
// Sort function starts here
$scope.sort = function(keyname,start_index){
$scope.sortBy = keyname;
$scope.index=start_index;
$scope.reverse = !$scope.reverse;
if($rootScope.domain == null || $rootScope.domain == null || $rootScope.domain == ""){
$scope.sortedtable ($scope.sortBy,$scope.index,$scope.reverse) ;    
}
else
{
$scope.level1 = $rootScope.domain ;
$scope.level2 = $rootScope.project ;
$scope.level3 = $rootScope.release  ;
$scope.sortedtableLevel($scope.level1,$scope.level2,$scope.level3,$scope.sortBy,$scope.index,$scope.reverse);
}
};
//Table on-load with sort implementation
$scope.sortedtable =function(sortvalue,start_index,reverse)
{
$scope.column=sortvalue;
$scope.index=start_index;
$scope.order=reverse;

$http.get("./rest/requirementServices/requirementsData?sortvalue="+$scope.column+"&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index+"&reverse="+$scope.order).success(function (response) {
$scope.reqTableDetails = response;
}) ; 
}
// Table on drop down change with sort implementation
$scope.sortedtableLevel =function(level1,level2,level3,sortvalue,start_index,reverse)
{
$scope.column=sortvalue;
$scope.index=start_index;
$scope.order=reverse;

$http.get("./rest/requirementServices/requirementsDataLevel?sortvalue="+$scope.column+"&itemsPerPage="+$scope.itemsPerPage+"&start_index="+$scope.index+"&reverse="+$scope.order+"&level1="+$scope.level1+"&level2="+$scope.level2+"&level3="+$scope.level3).success(function (response) {
$scope.reqTableDetails = response;
}) ; 
}

/* Lazy Load Table Ends Here */

我已尝试使用controller.js中的代码，但它不起作用，所以我删除了。如何保持我的列表懒惰显示，但搜索框过滤我的完整列表中的项目。

Answer 1

我正在弄清楚同样的问题。为了正确测试我尝试在单个调用或延迟加载中加载元素。在延迟加载的情况下，$ filter不起作用。