Anuja Patil Anuja Patil - 28 days ago 8
AngularJS Question

Angularjs search filter doesnot search in all the pages

The search filter only finds the records from the current page. And I want it to search from all the pages. I have used $scope.watch but I guess I am lacking knowledge in that. How shall I do it? Greatly appreciate the help. Thanks.

HTML:

<md-input-container flex>
<label>Search Participant</label>
<input ng-model="search" type="text" style="cursor: pointer;"/>
</md-input-container>

<div class="search-container">
<md-table-container>
<form class="epForm">
<table md-table md-row-select multiple >
<thead md-head>
<tr md-row>
<th md-column><span><!-- <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"/> -->Select</span>
</th>
<th md-column><span>Endpoint Name</span></th>
<th md-column><span>Endpoint Aliase</span></th>
<th md-column><span>Endpoint Protocol</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="" md-select-id="name" ng-repeat="endpoint in endpoints | startFrom:currentPage*pageSize | limitTo:pageSize | filter: search ">
<td md-cell><input type="checkbox" ng-model="endpoint.Selected" ng-change="endpointsSelected(endpoint)"/></td>
<td md-cell>{{endpoint.partName}}</td>
<td md-cell>{{endpoint.partSignalId}}</td>
<td md-cell>{{endpoint.partSignalType}}</td>
</tr>
<tr>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"
style="background: transparent;border: aliceblue;">
<img src="./images/previous.jpg"/>
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= endpoints.length/pageSize - 1" ng-click="currentPage=currentPage+1"
style="background: transparent;border: aliceblue;">
<img src="./images/next.jpg"/>
</button>
</tr>
</tbody>
</table>
</form>
</md-table-container>


JS:

$scope.currentPage = 0;
$scope.pageSize = 10;

$scope.$watch('search', function (v) {
$scope.currentPage = 0;
$scope.numberOfPages();
//$scope.pages = $scope.range();
}, true);

LoadingShow();
PinnacaService.getEndpointList(
$rootScope.admin.session_key,
$rootScope.room,
function(data, status){
$scope.endpoints = data;
$scope.numberOfPages=function(){
return Math.ceil($scope.endpoints.length/$scope.pageSize);
}
LoadingHide();
},
function(data, status){
if(status == 403){ //session timeout
alert($scope.$parent.lang.session_timeout);
$scope.$parent.logout();
}
$scope.msg_error = true;
$scope.msg_error_status = status;
$scope.msg_error_text = data;
LoadingHide();
})


myApp.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});

Answer

Modify following code

<tr md-row ng-click="" md-select-id="name" ng-repeat="endpoint in endpoints | startFrom:currentPage*pageSize |  limitTo:pageSize | filter: search ">

With

<tr md-row ng-click="" md-select-id="name" ng-repeat="endpoint in endpoints | filter: search | startFrom:currentPage*pageSize | limitTo:pageSize ">