Estou tentando aplicar um filtro com angular 1 Mas só estou conseguindo aplicar para 1 campo. Como consigo fazer um filtro que consiga buscar por mais campos? No meu caso vai ter um filtro com 5 tipos de campos.
-
Por que não cria o exemplo aqui ao invés de colocar no JSFiddle?– Jéf BuenoCommented 6/07/2017 às 20:18
-
@LINQ achei que era mais fácil pras pessoas verem no jsfiddle, vou adicionar aqui.– IsaCommented 6/07/2017 às 20:20
-
@LINQ assim que vc quis dizer?– IsaCommented 6/07/2017 às 20:23
Adicione um comentário
|
2 Respostas
É só usar um objeto para fazer o filtro.
angular.module('filter-app', []);
angular.module('filter-app').controller('mainController', mainController);
const itensSelect = [
{ id: 1, nome: 'PlayStation 4' },
{ id: 2, nome: 'XBox 360' }
];
// Aqui usei os itens do array acima pra não ficar repetindo
const data = [
{ nome: 'LINQ', navegador: 'Chrome', console: itensSelect[1] },
{ nome: 'Linus', navegador: 'Firefox', console: itensSelect[0] },
{ nome: 'Zelda', navegador: 'Firefox', console: itensSelect[1] },
{ nome: 'Zelia', navegador: 'Chrome', console: itensSelect[0] }
];
function mainController($scope) {
$scope.data = data;
$scope.itensSelect = itensSelect;
$scope.search = {};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="filter-app" ng-controller="mainController">
<input type="text" ng-model="search.nome" placeholder="Filtrar por nome">
<input type="text" ng-model="search.navegador" placeholder="Filtrar por navegador">
<select ng-options="item.id as item.nome for item in itensSelect" ng-model="search.console.id">
</select>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Navegador</th>
<th>Console</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="usuario in data | filter: search">
<td>{{usuario.nome}}</td>
<td>{{usuario.navegador}}</td>
<td>{{usuario.console.nome}}</td>
</tr>
</tbody>
</table>
</div>
-
@Isa Não tem como testar este código no JSFiddle. Está dando algum erro no console? Commented 7/07/2017 às 14:53
-
-
1Bem, então tente criar um exemplo executável para eu poder ver o que está acontecendo. Commented 7/07/2017 às 14:56
Implemente um filtro de busca geral.
O exemplo abaixo serializa o objeto e cacheia o resultado em uma propriedade escondida do objeto. A busca é então realizada no conteúdo serializado.
Clique em Executar para ver o filtro em ação:
angular.module('myApp', [])
.filter("buscaGenerica", function() {
return function(source, text) {
if (!source) return false;
if (!text) return source;
return source.filter(function(item) {
if (!item._compiledJSON) item._compiledJSON = JSON.stringify(item).toLowerCase();
text = text.toLowerCase();
return item._compiledJSON.indexOf(text) > -1;
});
};
})
.controller('myController', function($scope){
$scope.searchTerms = '';
$scope.dados = [
{
"_id": "595eac4835ccf1c3cf5c6f91",
"isActive": true,
"age": 30,
"eyeColor": "blue",
"name": {
"first": "Mayo",
"last": "Madden"
},
"company": "EXODOC",
"email": "[email protected]",
"about": "Veniam laboris pariatur aute et pariatur duis aliqua nisi anim deserunt aliquip duis. Officia elit ut amet consectetur sint officia laborum officia nostrud nulla. Cillum reprehenderit anim qui sunt voluptate fugiat pariatur occaecat exercitation laborum minim eu. Deserunt exercitation ea commodo et ut qui non consequat ad culpa consequat cupidatat. Cupidatat cillum anim ullamco sunt ex sit laborum do laborum sint laborum. Ullamco aute voluptate consectetur Lorem ipsum laborum occaecat nisi. Proident adipisicing consequat laborum esse commodo incididunt nisi do ea ut excepteur."
},
{
"_id": "595eac48e9b3933ae50b82ba",
"isActive": true,
"age": 25,
"eyeColor": "green",
"name": {
"first": "Melton",
"last": "Nunez"
},
"company": "FUELWORKS",
"email": "[email protected]",
"about": "Ipsum irure eiusmod minim dolore anim quis elit id sint consequat ea velit cillum veniam. Ut sint reprehenderit commodo nostrud cupidatat occaecat velit amet dolore reprehenderit irure pariatur. Irure id sit pariatur nisi cillum sunt in proident cillum eiusmod. Ex qui magna occaecat fugiat. Culpa cillum proident deserunt exercitation elit officia in. Dolore nisi anim ullamco duis deserunt mollit excepteur ad veniam. Amet nisi occaecat culpa laboris ut fugiat voluptate officia."
},
{
"_id": "595eac48d830aa0900d9e39c",
"isActive": false,
"age": 37,
"eyeColor": "blue",
"name": {
"first": "Cobb",
"last": "Frazier"
},
"company": "ISOSURE",
"email": "[email protected]",
"about": "Consectetur irure deserunt consequat in voluptate reprehenderit est consectetur sunt qui labore eu do. Aliquip anim eu amet officia incididunt nostrud consequat culpa esse. Cupidatat eiusmod ut tempor qui nisi ipsum laboris. Est reprehenderit reprehenderit adipisicing dolore officia id. Ullamco ad voluptate ea cupidatat duis culpa cupidatat veniam elit ex reprehenderit. Culpa occaecat Lorem eu sit est sit irure dolore deserunt laboris."
},
{
"_id": "595eac48d7c0694efa4eda9f",
"isActive": true,
"age": 22,
"eyeColor": "green",
"name": {
"first": "Murphy",
"last": "Walsh"
},
"company": "MACRONAUT",
"email": "[email protected]",
"about": "Eu occaecat dolore reprehenderit irure. Non occaecat eiusmod nisi laborum ipsum ullamco in. Deserunt anim culpa minim ullamco irure ut."
},
{
"_id": "595eac4841a32cc9d3d95b6a",
"isActive": false,
"age": 40,
"eyeColor": "blue",
"name": {
"first": "Constance",
"last": "Newman"
},
"company": "NORSUP",
"email": "[email protected]",
"about": "Voluptate incididunt amet consequat est pariatur culpa exercitation. Eu ut proident voluptate sunt aliqua minim Lorem laboris qui incididunt id esse enim. Excepteur dolore ullamco incididunt sint magna consequat sit. Officia nostrud veniam sunt et elit proident. Dolore duis sunt ut non et pariatur. Veniam nisi aute aliqua tempor sint velit."
},
{
"_id": "595eac4860bbd2894e2d067e",
"isActive": false,
"age": 33,
"eyeColor": "green",
"name": {
"first": "Concepcion",
"last": "Bean"
},
"company": "NIMON",
"email": "[email protected]",
"about": "Nulla reprehenderit pariatur ex adipisicing laborum deserunt tempor officia aliquip. Quis minim proident veniam irure non id duis. Ex do proident id deserunt qui cillum qui nulla aute consectetur aliqua eu. Ad commodo laborum anim consectetur irure in. Minim sint elit esse magna tempor ad."
},
{
"_id": "595eac48f4218a842009fae7",
"isActive": true,
"age": 24,
"eyeColor": "blue",
"name": {
"first": "Mccarty",
"last": "Compton"
},
"company": "INTERODEO",
"email": "[email protected]",
"about": "Quis laborum nulla pariatur laboris aliquip dolore ut consequat incididunt laboris fugiat voluptate. Cillum irure esse anim non in labore minim ipsum. Culpa consequat ea pariatur laborum ea incididunt occaecat esse. Ad officia consequat non nostrud est laboris minim quis cillum occaecat duis. Tempor et anim officia consectetur dolor labore esse nisi culpa pariatur fugiat. Anim cupidatat elit excepteur commodo duis id. Pariatur nisi excepteur sint ad Lorem."
},
{
"_id": "595eac48d58e11bde65ea57c",
"isActive": false,
"age": 25,
"eyeColor": "blue",
"name": {
"first": "Ward",
"last": "Pruitt"
},
"company": "MAGNAFONE",
"email": "[email protected]",
"about": "Cupidatat esse exercitation irure esse irure nulla ullamco. Magna fugiat aliqua eu pariatur ea mollit excepteur sit esse laboris laborum consequat. Deserunt consequat veniam tempor irure deserunt pariatur laborum dolor et non Lorem."
}
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="myApp">
<div ng-controller='myController'>
<input ng-model='searchTerms'/>
<ul>
<li ng-repeat='i in (dados | buscaGenerica: searchTerms)'>
{{i.name.first}} {{i.name.last}} ({{i.email}})
</li>
</ul>
</div>
</div>