Série AngularJS – Usando Filter com search | iMasters
Série AngularJS – Usando Filter com search
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",
name : "Chapolin",
lastname:"Santana",
name : "Madruga",
lastname:"Santos",
name : "Ana",
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-->
<label>Search for:<input type="text" ng-model="criteria"></label>
<tr ng-repeat="friend in friends | filter:criteria">
<td>{{friend.lastname}}</td>
<td>{{friend.age}}
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: