Filtrage par plusieurs propriétés de modèle spécifiques dans AngularJS (dans la relation OR)

Regardez l’exemple ici: http://docs.angularjs.org/api/ng.filter:filter

Vous pouvez effectuer une recherche par l’une des propriétés du téléphone en utilisant et vous pouvez rechercher uniquement le nom en utilisant , et les résultats sont filtrés de manière appropriée par nom (taper un numéro de téléphone ne renvoie aucun résultat, comme prévu).

Disons que j’ai un modèle avec une propriété “name”, une propriété “phone”, et une propriété “secret”, comment puis-je filtrer à la fois par les propriétés “name” et “phone” et non par la propriété “secret” ? Donc, en gros, l’utilisateur pourrait taper un nom ou un numéro de téléphone et le ng-repeat filtrerait correctement, mais même si l’utilisateur tapait une valeur égale à une partie d’une valeur “secrète”, il ne renverrait rien.

Merci.

Voici le plunker

Nouveau plunker avec code de nettoyage et où les éléments de liste de requête et de recherche sont insensibles à la casse

L’idée principale est de créer une fonction de filtrage pour atteindre cet objective.

De doc officiel

function: Une fonction de prédicat peut être utilisée pour écrire des filtres arbitraires. La fonction est appelée pour chaque élément du tableau. Le résultat final est un tableau contenant les éléments renvoyés par le prédicat true.

   

 $scope.search = function(item) { if (!$scope.query || (item.brand.toLowerCase().indexOf($scope.query) != -1) || (item.model.toLowerCase().indexOf($scope.query.toLowerCase()) != -1) ){ return true; } return false; }; 

Mettre à jour

Certaines personnes peuvent se préoccuper des performances dans le monde réel, ce qui est correct.

Dans le monde réel, nous ferions probablement ce genre de filtre du contrôleur.

Voici le post de détail montrant comment le faire.

en bref, nous ajoutons ng-change aux entrées pour surveiller les nouveaux changements de recherche

puis déclenchez la fonction de filtre.

Vous pouvez transmettre un object en tant que paramètre à votre expression de filtre, comme décrit dans la référence de l’ API . Cet object peut appliquer sélectivement les propriétés qui vous intéressent, comme ceci:

     

Voici un Plunker

Heads up … cet exemple fonctionne très bien avec AngularJS 1.1.5, mais pas toujours aussi bien avec 1.0.7. Dans cet exemple, 1.0.7 s’initialisera avec tout ce qui est filtré, puis fonctionnera lorsque vous utiliserez les entrées. Il se comporte comme les entrées dont les valeurs ne correspondent pas, même si elles commencent à blanc. Si vous voulez restr sur des versions stables, essayez-le pour votre situation, mais certains scénarios peuvent utiliser la solution @ maxisam jusqu’à la publication de la version 1.2.0.

Je me suis inspiré de la réponse de @maxisam et j’ai créé ma propre fonction de sorting et je la partagerais (parce que je m’ennuie).

Situation Je veux filtrer à travers un tableau de voitures. Les propriétés à filtrer sélectionnées sont nom, année, prix et km. Le prix de la propriété et le .toSsortingng sont des nombres (d’où l’utilisation de .toSsortingng ). Je veux aussi contrôler les majuscules (donc .toLowerCase ). Aussi je veux être capable de diviser ma requête de filtre en différents mots (par exemple, étant donné le filtre 2006 Acura, il trouve des correspondances 2006 avec l’année et Acura avec le nom).

Fonction que je passe pour filtrer

  var attrs = [car.name.toLowerCase(), car.year, car.price.toSsortingng(), car.km.toSsortingng()], filters = $scope.tableOpts.filter.toLowerCase().split(' '), isSsortingngInArray = function (ssortingng, array){ for (var j=0;j 

Si vous êtes ouvert à l’utilisation de bibliothèques tierces, les «filtres angulars» avec une belle collection de filtres peuvent être utiles:

https://github.com/a8m/angular-filter#filterby

 collection | filterBy: [prop, nested.prop, etc..]: search 

J’espère que cette réponse aidera, filtre de valeurs multiples

Et exemple de travail dans ce violon

 arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]} 

Il y a beaucoup de bonnes solutions ici, mais je suggérerais d’aller dans l’autre sens. Si la recherche est la chose la plus importante et que la propriété «secret» n’est pas utilisée du tout sur la vue; Mon approche pour cela serait d’utiliser le filtre angular intégré avec tous ses avantages et de simplement mapper le modèle sur un nouveau tableau d’objects.

Exemple de la question:

 $scope.people = members.map(function(member) { return { name: member.name, phone: member.phone }}); 

Maintenant, en html, utilisez simplement le filtre normal pour rechercher ces deux propriétés.

 

http://plnkr.co/edit/A2IG03FLYnEYMpZ5RxEm?p=preview

Voici une recherche sensible à la casse qui sépare également votre recherche en mots à rechercher également dans chaque modèle. Ce n’est que lorsqu’il trouve un espace qu’il essaie de diviser la requête en un tableau, puis de rechercher chaque mot.

Il renvoie true si chaque mot est au moins dans l’un des modèles.

 $scope.songSearch = function (row) { var query = angular.lowercase($scope.query); if (query.indexOf(" ") > 0) { query_array = query.split(" "); search_result = false; for (x in query_array) { query = query_array[x]; if (angular.lowercase(row.model1).indexOf(query || '') !== -1 || angular.lowercase(row.model2).indexOf(query || '') !== -1 || angular.lowercase(row.model3).indexOf(query || '') !== -1){ search_result = true; } else { search_result = false; break; } } return search_result; } else { return (angular.lowercase(row.model1).indexOf(query || '') !== -1 || angular.lowercase(row.model2).indexOf(query || '') !== -1 || angular.lowercase(row.model3).indexOf(query || '') !== -1); } }; 

Approche assez simple utilisant filterBy dans angularJs

Pour travailler plnkr suivez ce lien

http://plnkr.co/edit/US6xE4h0gD5CEYV0aMDf?p=preview

Cela a spécialement utilisé une seule propriété pour rechercher sur plusieurs colonnes mais pas toutes.

 < !DOCTYPE html>          
{{row.col1}} {{row.col2}} {{row.col3}}

This will show filter from two columns only(col1 and col2) . Not from all. Whatever columns you add into filter array they will be searched. all columns will be used by default if you use filter: vm.searchText

manette

 // Code goes here (function(){ var myApp = angular.module('myApp',['angular.filter']); myApp.controller('myCtrl', function($scope){ var vm= this; vm.x = 20; vm.tableData = [ { col1: 'Ashok', col2: 'Tewatia', col3: '12' },{ col1: 'Babita', col2: 'Malik', col3: '34' },{ col1: 'Dinesh', col2: 'Tewatia', col3: '56' },{ col1: 'Sabita', col2: 'Malik', col3: '78' } ]; }) })(); 

J’aime restr simple quand c’est possible. Je devais regrouper par International, filtrer toutes les colonnes, afficher le nombre de chaque groupe et masquer le groupe si aucun élément n’existait.

De plus, je ne voulais pas append un filtre personnalisé pour quelque chose de simple comme celui-ci.

   

USA ({{fusa.length}})

{{$index + 1}}

International ({{fint.length}})

{{$index + 1}}

Le filtre peut être un object JavaScript avec des champs et vous pouvez avoir une expression en tant que:

 ng-repeat= 'item in list | filter :{property:value}' 

Voici une solution simple pour ceux qui veulent un filtre rapide contre un object:

  

Le filtre de tableau vous permet d’imiter l’object que vous essayez de filtrer. Dans le cas ci-dessus, les classes suivantes fonctionneraient très bien:

 var card = function(name, type) { var _name = name; var _type = type; return { Name: _name, Type: _type }; }; 

Et où le pont pourrait ressembler:

 var deck = function() { var _cards = [new card('Jack', 'Face'), new card('7', 'Numeral')]; return { Cards: _cards }; }; 

Et si vous voulez filtrer plusieurs propriétés de l’object, séparez les noms de champs par une virgule:

  

EDIT: Voici un plnkr fonctionnel qui fournit un exemple de filtres de propriété simples et multiples:

http://embed.plnkr.co/i0wCx6l1WPYljk57SXzV/

Je pourrais être très en retard mais c’est ce que j’ai fini par faire. J’ai fait un filtre très général.

 angular.module('app.filters').filter('fieldFilter', function() { return function(input, clause, fields) { var out = []; if (clause && clause.query && clause.query.length > 0) { clause.query = Ssortingng(clause.query).toLowerCase(); angular.forEach(input, function(cp) { for (var i = 0; i < fields.length; i++) { var haystack = String(cp[fields[i]]).toLowerCase(); if (haystack.indexOf(clause.query) > -1) { out.push(cp); break; } } }) } else { angular.forEach(input, function(cp) { out.push(cp); }) } return out; } }) 

Alors utilise-le comme ça

  

Votre champ de recherche ressemble à

  

où name et device_id sont des propriétés dans dvs