0

Fala pessoal, estou com o seguinte problema, tenho uma lista de nomes:

$scope.names=["Max", "Tom", "Ralf", "Jerry", "Snow", "Carl"];

Fiz um filter normal para o input search

<ul>
  <li ng-repeat="name in names | filter: search">{{name}}</li>
</ul>
</div>
<div>
<input type="search" ng-model="search">
</div>

No entanto eu quero criar um custom filter para mostrar apenas os nomes relacionados a 1º letra digitada no input search, no caso, digitar a letra "R" e o resultado seja apenas "Ralf" invés de buscar o "R" em todas as letras, que resulta em "Ralf" e "Jerry".

Pensei em usar um angular.forEach para percorrer os nomes mas não consegui o resultado que queria, caso ajude, segue o codepen para facilitar:

http://codepen.io/haykou/pen/aDczA

1
  • Por favor, poste o código do seu filtro até o momento, e qual o resultado esta obtendo com ele. Commented 18/09/2014 às 19:30

2 Respostas 2

1

Bom, achei uma solução como eu queria, só não entendi a parte do regex.test mas acho que a solução pode servir para outras pessoas com dúvida.

var List = function($scope){
 $scope.names=["Tax", "Tom", "Ralf", "Jerry", "Snow", "Carl"];

  function escRegExp(string){
   return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g);
    }

  $scope.filterSearch = function(name) {
 if (!$scope.search){
   return true;
 }else
    var regex = new RegExp('\\b' + escRegExp($scope.search), 'i');
    return regex.test(name.split(' ')[0]);
};  
}
0

Você pode criar um filtro personalizado e registrá-lo no angular.

1 - Criar um modulo

var app = angular.module('app',[]);
<html ng-app="app">

2 - Registrar o controller neste modulo

app.controller('List',List)

3 - Criar o filter

app.filter('firstType',function(){
  return function(input, type){
    var results = [];
    for(var i in input){
      var name = input[i];
        if(name[0]==type)
            results.push(name);
    }
    return results;
  };
});

4 - Chamar o filter

<div ng-controller="List">
  <ul>
    <li ng-repeat="name in names | firstType: filterSearch">{{name}}</li>
  </ul> 
  <div>
    <input type="search" ng-model="filterSearch">
  </div>
</div>

Alguns links para auxilo:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .