CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-filter
Thalles Leonardelli
Thalles Leonardelli

Reputation: 3

Angular ng-repeat stay paged after filter

I'm using AngularJS and I have a simple table using ng-repeat and filter. When i insert anything at the search input it filters OK but it keeps paginated as it was before I filter the table. Any ideas why this is happening ?

Here's my code:

//some var initialization
$scope.pagina = {};
$scope.pagina.currentPage = 1,
$scope.pagina.numPerPage = 10,
$scope.pagina.maxSize = 5;

//return from server with data
coresFactory.getCores().then(function(response) {
    $scope.tabelaCores = response.data; 
    $scope.filteredTodos = $scope.tabelaCores.cores.slice(0, 10);
});

//do pagination
$scope.$watch('pagina.currentPage', function() {
    var begin = (($scope.pagina.currentPage - 1) * $scope.pagina.numPerPage),
    end = begin + $scope.pagina.numPerPage;
            
    $scope.filteredTodos = $scope.tabelaCores.cores.slice(begin, end);
},true);
<input ng-model="pesquisaTabela" type="search" style="width:300px;" class="form-control input-inline" placeholder="" aria-controls="sample_1"></label>
<table class="table" style="margin-bottom:5px;border:1px solid #DDDDDD" id="sample_1">
	<thead>
		<tr style="background-color:#F9F9F9">
			<th style="width:100px; text-align:center;"> Id </th>
			<th> Nome </th>
			<th> Plural	</th>
			<th style="width:100px; text-align:center;"> Ativo </th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="cor in filteredTodos | filter:pesquisaTabela" ng-click="setSelected(cor.id)" ng-class="{linhaSelected: cor.id === idCorSelecionada}">
			<td style="text-align:center;"> {{cor.id}} </td>
			<td style="text-transform:capitalize"> {{cor.nome}} </td>
			<td style="text-transform:capitalize"> {{cor.plural}}	</td>
			<td style="text-align:center;">
				<span ng-if="cor.status=='sim'" class="label label-sm label-success"> Sim </span>
				<span ng-if="cor.status=='nao'" class="label label-sm label-danger"> Não </span>
			</td>
		</tr>
	</tbody>
</table>
<pagination first-text="<<" last-text=">>" next-text=">" previous-text="<" ng-model="pagina.currentPage" total-items="tabelaCores.cores.length" max-size="pagina.maxSize" boundary-links="true"></pagination>

Upvotes: 0

Views: 299

Answers (1)

charlietfl
charlietfl

Reputation: 171690

You have quite a disconnect between various parts

Pagination is working off of one array, display from another and filter from yet another because when filter kicks in it returns a new filtered array.

The way you have things structured, your filter won't work properly either. When you slice the main data array the filter is only going to work on that part that is sliced....not the whole main array

In order for pagination to be synchronized with filtering your simplest start point would likely be do your own filtering and share the same filtered array between the pagination and the table.

There are some other built in filters that you could use also like limitTo that takes 2 arguments limit and begin. That would help you get rid of currrent slice

There are lots of available grid/table directives available. Using one of those would be my best suggestion

There is one other way you could do this all in the view. There is a syntax for ng-repeat that creates a new filtered array on the scope and therefore gives you access to it's length

<tr ng-repeat="row in filteredData = ( data |filter:pesquisaTabela | limitTo:10:start)">

Using this you could pass filteredData array to the total-items of the pagination directive.

It also now lets you do things like: 

<div> Filtered length is: {{filteredData.length}}</div>

Upvotes: 1

Related Questions