Olá, pessoal!

No artigo de hoje vamos ver como usar o recurso de filter do AngularJS. A ideia é que quando o usuário digite um caractere válido a algum dado dentro do filter, este seja retornado. Vou mostrar dois exemplos, um retornando por idade e outro pelo nome.

Vamos usar o ng-repeat e o atributo filter. O código é tão simples que nem parece verdade. Considerando que você já tenha a estrutura do AngularJS, então vou ignorar todo o setup básico. Para o artigo estou usando o recurso de rotas simplesmente para facilitar (além do fato de ser bacana), mas não é requerido que seu projeto esteja usando rotas. 

Criando o controller

Eu tenho um arquivo de controller.js e nele tem todos os controllers. Claro que fiz isso para facilitar nos exemplos da série. Em um projeto o ideal é termos isso separado e não colocar todos os controllers em um único arquivo.

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

Não tem nada demais, apenas um array com informações de alguns amigos.

Criando HTML

Vamos criar o HTML, pois é onde está a magia. Chamei o meu de filterorder.html. A seguir, o conteúdo:

<!-- by age only-->
	<div>
		<label>Search by age</label> <input ng-model="ageValue" />
		<ul
ng-repeat="friend in friends | filter:{name:query,age:ageValue}|orderBy:'name'">
			<li>{{friend.name}} ({{friend.age}})</li>
		</ul>
	</div>
	<!-- by name only-->
	<div>
		<label>Search by name</label> <input ng-model="nameValue" />
		<ul
ng-repeat="friend in friends | filter:{name:query,name:nameValue}|orderBy:'name'">
			<li>{{friend.name}} ({{friend.age}})</li>
		</ul>
	</div>

	<!-- by age and name -->
	<div>
		<label>Search by age and name</label> <input ng-model="query" />
		<ul
		ng-repeat="friend in friends | filter:query|orderBy:'name'">
			<li>{{friend.name}} ({{friend.age}})</li>
		</ul>
	</div>

Testando

Vamos ver o resultado válido:

Observe que não digitei nada, portanto foi exibido todo o meu array.

Observe o resultado acima. Busquei pela idade, em seguida informei o nome e por último apenas digitei parcial e o AngularJS já me retornou.

Agora vamos ver o lado inválido:

Nem preciso falar, né? Realmente muito simples a implementação, e o resultado é fantástico.

Vou ficando por aqui e espero que tenham gostado do artigo.

Abraços!