Angular Series: O filtro filter, ng-model, ng-repeat e algumas coisitas a mais …

Sim, o angular tem um filtro chamado filter. Apesar da total falta de criatividade no nome, seu funcionamento é mágico e deixa visível o poder que esse framework nos proporciona. Sem mais delongas, vamos entender o funcionamento do mesmo, mas primeiro …

A diretiva ng-model

A ng-model é uma diretiva de ligação, ou seja, ela vincula a propriedade ao escopo. Na view abaixo, temos um input com uma ng-model que armazena o valor informado no input na variável ‘search’, exibindo o valor da mesma graças ao two way binding:

<!DOCTYPE html>
<html data-ng-app="MeuModulo">
<head>
<meta charset="utf-8">
<title>Controller</title>
</head>
<body data-ng-controller="UserController as User">
<h1>{{ User.titulo }}</h1>
<label>Busca: <input data-ng-model="search"></label>
<p>{{ search }}</p>
<script src="angular.min.js"></script>
<script>
angular.module('MeuModulo', [])
.controller('UserController', UserController);
function UserController() {
var vm = this;
vm.titulo = 'Jogadores';
vm.users = [
{name: 'Kobe Bryant', team: 'Los Angeles Lakers'},
{name: 'Michael Jordan', team: 'Chicago Bulls'},
{name: 'LeBron James', team: 'Cleveland Cavaliers'},
{name: 'Stephen Curry', team: 'Golden State Warriors'},
{name: 'Magic Johnson', team: 'Los Angeles Lakers'}
];
}
</script>
</body>
</html>

A diretiva ng-repeat

A diretiva ng-repeat é a responsável por iterar sobre os valores vindos do nosso controller, ou seja, com ela você consegue iterar sobre arrays e até mesmo sobre os valores de um objeto, como visto abaixo:

<!DOCTYPE html>
<html data-ng-app="MeuModulo">
<head>
<meta charset="utf-8">
<title>Controller</title>
</head>
<body data-ng-controller="UserController as User">
<h1>{{ User.titulo }}</h1>
<label>Busca: <input data-ng-model="search"></label>
<table>
<thead>
<tr>
<th data-ng-repeat="(key, value) in User.users[0]">{{ key }}</th>
</tr>
</thead>
<tbody data-ng-repeat="user in User.users">
<tr>
<td data-ng-repeat="(key, value) in user">{{ value }}</td>
</tr>
</tbody>

</table>
<script src="angular.min.js"></script>
<script>
angular.module('MeuModulo', [])
.controller('UserController', UserController);
function UserController() {
var vm = this;
vm.titulo = 'Jogadores';
vm.users = [
{name: 'Kobe Bryant', team: 'Los Angeles Lakers'},
{name: 'Michael Jordan', team: 'Chicago Bulls'},
{name: 'LeBron James', team: 'Cleveland Cavaliers'},
{name: 'Stephen Curry', team: 'Golden State Warriors'},
{name: 'Magic Johnson', team: 'Los Angeles Lakers'}
];

}
</script>
</body>
</html>

A diretiva ng-repeat é semelhante ao foreach do javascript, ou seja, executa uma dada função em cada elemento de um array ou até mesmo objeto como visto acima, no nosso caso imprimindo os valores vindo do nosso array presente no controller.

Ordenando com OrderBy

O OrderBy, como o próprio nome diz, é responsável por ordenar os valores da nossa listagem de alguma forma, veja abaixo um exemplo do seu uso:

<!DOCTYPE html>
<html data-ng-app="MeuModulo">
<head>
<meta charset="utf-8">
<title>Controller</title>
</head>
<body data-ng-controller="UserController as User">
<h1>{{ User.titulo }}</h1>
<label>Busca: <input data-ng-model="searchUser"></label>
<table>
<thead>
<tr>
<th data-ng-repeat="(key, value) in User.users[0]">{{ key }}</th>
</tr>
</thead>
<tbody data-ng-repeat="user in User.users | orderBy:'name':false">
<tr>
<td data-ng-repeat="(key, value) in user">{{ value }}</td>
</tr>
</tbody>
</table>
<script src="angular.min.js"></script>
<script>
angular.module('MeuModulo', [])
.controller('UserController', UserController);
function UserController() {
var vm = this;
vm.titulo = 'Jogadores';
vm.users = [
{name: 'Kobe Bryant', team: 'Los Angeles Lakers'},
{name: 'Michael Jordan', team: 'Chicago Bulls'},
{name: 'LeBron James', team: 'Cleveland Cavaliers'},
{name: 'Stephen Curry', team: 'Golden State Warriors'},
{name: 'Magic Johnson', team: 'Los Angeles Lakers'}
];
}
</script>
</body>
</html>

Note que o OrderBy não é nada mais que um filtro que o angular já nos proporciona. Ele recebe dois parâmetros, o primeiro é o predicate que referente ao canto que vamos usar como filtro, no nosso caso foi o ‘name’, e o segundo é o reverse, que pode ser true ou false, e se refere a ordem de listagem dos itens presentes no array.

O filter na prática

E finalmente o tão famigerado filter. Deixei ele por último por que precisava desse embasamento inicial para entendermos de fato o funcionamento dele. O filter nos proporciona uma filtragem em tempo real nos itens iterados pela ng-repeat, através dele conseguimos separar um ou mais itens da listagem sem muito trabalho, tudo isso graças ao two way binding que utilizando o valor armazenado na nossa ng-model como parâmetro para filtragem dos dados no filter como é mostrado abaixo:

<!DOCTYPE html>
<html data-ng-app="MeuModulo">
<head>
<meta charset="utf-8">
<title>Controller</title>
</head>
<body data-ng-controller="UserController as User">
<h1>{{ User.titulo }}</h1>
<label>Busca: <input data-ng-model="search"></label>
<table>
<thead>
<tr>
<th data-ng-repeat="(key, value) in User.users[0]">{{ key }}</th>
</tr>
</thead>
<tbody data-ng-repeat="user in User.users | orderBy:'name'false | filter:search">
<tr>
<td data-ng-repeat="(key, value) in user">{{ value }}</td>
</tr>
</tbody>
</table>
<script src="angular.min.js"></script>
<script>
angular.module('MeuModulo', [])
.controller('UserController', UserController);
function UserController() {
var vm = this;
vm.titulo = 'Jogadores';
vm.users = [
{name: 'Kobe Bryant', team: 'Los Angeles Lakers'},
{name: 'Michael Jordan', team: 'Chicago Bulls'},
{name: 'LeBron James', team: 'Cleveland Cavaliers'},
{name: 'Stephen Curry', team: 'Golden State Warriors'},
{name: 'Magic Johnson', team: 'Los Angeles Lakers'}
];
}
</script>
</body>
</html>

Note que ao executar o código, o simples fato de por trechos dos valores dos nomes ou dos times, já nos proporciona uma filtragem dinâmica.

Conclusão

Como visto aqui, apesar da falta de criativade no nome, o filtro filter do angular viabiliza filtragem na apresentação dos nossos dados de forma simples e organizada, possibilitando com isso um desenvolvimento rapido e eficaz.