Angular ng-repeat 在过滤后保持分页

Question

我正在使用 AngularJS，并且我有一个使用 ng-repeat 和过滤器的简单表格。当我在搜索输入中插​​入任何内容时，它会过滤正常，但它会像过滤表格之前一样保持分页。任何想法为什么会发生这种情况？

这是我的代码：

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

Answer 1

你的各个部分之间有很大的脱节

分页正在处理一个数组，从另一个数组显示，filter 从另一个数组显示，因为当filter 启动时，它会返回一个新的过滤数组。

按照您的结构方式，您的过滤器也无法正常工作。 当您对主数据数组进行切片时，过滤器只会对被切片的部分起作用....而不是整个主数组

为了使分页与过滤同步，您最简单的起点可能是进行自己的过滤并在分页和表格之间共享相同的过滤数组。

您还可以使用其他一些内置过滤器，例如 limitTo，它采用两个参数 limit 和 begin。这将帮助您摆脱当前的slice

有很多可用的网格/表格指令可用。 使用其中之一将是我最好的建议

还有另一种方法可以在视图中完成所有这些操作。 ng-repeat 的语法可以在作用域上创建一个新的过滤数组，因此您可以访问它的长度

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

使用它，您可以将filteredData 数组传递给分页指令的total-items。

它现在还允许您执行以下操作：

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