Filtrage par plusieurs propriétés spécifiques du modèle en AngularJS

Question

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

Vous pouvez effectuer une recherche par n'importe quelle propriété du téléphone en utilisant <input ng-model="search"> et vous pouvez effectuer une recherche par le nom uniquement en utilisant <input ng-model="search.name"> et les résultats sont correctement filtrés par nom (la saisie d'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é "nom", une propriété "téléphone" et une propriété "secret", comment puis-je filtrer par les deux les propriétés "nom" et "téléphone" et pas la propriété "secrète" ? Donc, en substance, l'utilisateur pourrait taper un nom ou un numéro de téléphone et la fonction ng-repeat filtrerait correctement, mais même si l'utilisateur saisissait une valeur égale à une partie d'une valeur "secrète", il ne renverrait rien.

Merci.

Answer 1

Voici le plunker

L'idée principale est de créer une fonction de filtre pour atteindre cet objectif.

De document officiel

fonction : Une fonction 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 des éléments pour lesquels le prédicat a retourné vrai.

<input ng-model="query">

<tr ng-repeat="smartphone in smartphones | filter: search "> 

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

Answer 2

Vous pouvez passer un objet en tant que paramètre de votre expression de filtre, comme décrit dans l'onglet Référence API . Cet objet peut appliquer de manière sélective les propriétés qui vous intéressent, comme ceci :

<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">

Voici un Plunker

Attention... cet exemple fonctionne très bien avec AngularJS 1.1.5, mais pas toujours aussi bien en 1.0.7. Dans cet exemple, la version 1.0.7 s'initialise avec tout ce qui est filtré, puis fonctionne lorsque vous commencez à utiliser les entrées. Elle se comporte comme si les entrées contenaient des valeurs non correspondantes, même si elles commencent par être vides. Si vous voulez rester sur des versions stables, allez-y et essayez ceci pour votre situation, mais certains scénarios peuvent vouloir utiliser la solution de @maxisam jusqu'à ce que la 1.2.0 soit publiée.

Answer 3

Je me suis inspiré de la réponse de @maxisam et j'ai créé ma propre fonction de tri et j'ai pensé la partager (parce que je m'ennuie).

Situation Je veux filtrer un éventail de voitures. Les propriétés sélectionnées pour le filtrage sont le nom, l'année, le prix et le kilométrage. Les propriétés prix et kilométrage sont des nombres (d'où l'utilisation de la fonction .toString ). Je veux également contrôler les lettres majuscules (d'où .toLowerCase ). Je veux également pouvoir diviser ma requête de filtrage en différents mots (par exemple, avec le filtre 2006 Acura, il trouve les correspondances 2006 avec l'année et Acura avec le nom).

Fonction que je passe au filtre

        var attrs = [car.name.toLowerCase(), car.year, car.price.toString(), car.km.toString()],
            filters = $scope.tableOpts.filter.toLowerCase().split(' '),
            isStringInArray = function (string, array){
                for (var j=0;j<array.length;j++){
                    if (array[j].indexOf(string)!==-1){return true;}
                }
                return false;
            };

        for (var i=0;i<filters.length;i++){
            if (!isStringInArray(filters[i], attrs)){return false;}
        }
        return true;
    };

Answer 4

Si vous êtes ouvert à l'utilisation de bibliothèques tierces, "Angular Filters" avec une belle collection de filtres peut être utile :

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

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

Answer 5

J'espère que cette réponse vous aidera, Filtre à valeurs multiples

Et l'exemple de travail dans ce violon

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