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

我有一个表格列表，并通过分页惰性地加载-一次只有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中的代码，但它不起作用，所以我删除了。

---

如何让我的列表保持懒散显示，但让搜索框从我的完整列表中筛选项目。

我也发现了同样的问题。为了正确地进行测试，我尝试在单次调用或延迟加载中加载元素。如果延迟加载$filter，则无法工作。

您正在对每个页面选择进行

http

调用，以仅带来列表的一部分？您确定第一次加载页面时，

$scope.reqTableDetails

有788项吗？不，我已经在上面提到过，就像第一次加载页面时只有5项一样。我正在处理分页的延迟加载，因此，每次单击“分页下一步”按钮时，它将每5次加载一次数据。但是，该表显示了总页码。因此，仅使用角度过滤器是不可能实现搜索的，因为它仅对范围变量执行过滤器，该变量在任何时候都只有5个元素。您必须创建一个服务来搜索所有788个项目。

$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 */