Olá, pessoal!

No artigo de hoje vamos ver como usar o Filter com recursos bem interessantes e que certamente aparece no requisito do cliente. Um deles é ao digitar um valor no campo search, o conteúdo da tabela ser filtrado a medida que digitamos, algo assim:

O resultado final do artigo está no meu github no repositório workspaceAngularJS dentro do projeto receipeangularjsexample. Para quem não conhece, criei esse projeto somente para ir colocando exemplos isolados com angularJS e que vou compartilhando aqui no blog. Eu já expliquei filter outras vezes aqui no blog, então vou usar o controller já existente no exemplo acima que está dentro do arquivo recipeController.js, que está assim:

var filterController = function($scope) {
	$scope.friends = [ {
		name : "Camilo",
		lastname:"Lopes",
		age : 20
	}, {
		name : "Chapolin",
		lastname:"Santana",
		age : 55
	}, {
		name : "Madruga",
		lastname:"Santos",
		age : 60
	}, {
		name : "Ana",
		lastname:"Lopes",
		age : 30
	} ];
};

Agora vamos configurar uma rota para o nosso exemplo, em app.js vamos configurar assim:

//restante do código omitido

when("/filteradvance", {
		templateUrl : "filteradvance.html", 
		controller:filterController
		}).

E por último vamos criar um arquivo filteradvance.html assim:

<!--table with search-->
<div class="well">
<label>Search for:<input type="text" ng-model="criteria"></label>
</div>
<table class="table table-bordered">
<thead>
<th>Name</th>
<th>Lastname</th>
<th>Age</th>
</thead>
<tbody>
<tr ng-repeat="friend in friends | filter:criteria">
<td>{{friend.name}}</td>
<td>{{friend.lastname}}</td>
<td>{{friend.age}}
</tr>
</tbody>
</table>

Vamos entender o código

Observe que criei no input do search um ng-model, a variável que terá o valor digitado. No ng-repeat, apenas mandei filtrar pelo valor da variável critério, então quando digitarmos algo e corresponder a algum conteúdo da tabela, teremos apenas os dados relacionado, veja:

Observe que o resultado considera qualquer valor na tabela, agora digitei um número e foi considerado o atributo age.

Se digitarmos um valor que não existe a tabela fica vazia:

Agora, se queremos considerar apenas o campo name como critério para pesquisa, ou seja, os demais atributos devem ser ignorados. Como seria? Veja:

ng-repeat="friend in friends | filter:{name:criteria}"

Pronto, informamos que a pesquisa deve ser pelo name:

Se tentarmos pesquisar pela idade, não vai rolar:

Ao pesquisar por uma idade válida obtemos, a tabela vazia.

E se eu quiser saber a quantidade de registro na tabela e quando for filtrado? É assim:

ng-repeat="friend in friendsFiltered = (friends | filter:criteria)"

Precisamos criar uma variável para obter os valores filtrados e exibir o tamanho em seguida:

Total Record: {{friendsFiltered.length}}

O resultado:

Com filtro:

Vou ficando por aqui…

Por hoje é isso! Espero que tenham gostado do artigo. Simples não?

Abraços!