108 votes

Wind Up Toy avatar

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

Demandé el 4 de Novembre, 2012
Quand la question a-t-elle été
24073 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la 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.

Demandé el 4 de Novembre, 2012 par Wind Up Toy

Réponses

Trop de publicités?

3voto

CredibleAshok avatar
CredibleAshok Points 63

Approche assez directe utilisant filterBy dans angularJs

Pour travailler en plnkr, suivez ce lien

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

Cela a permis d'utiliser une seule propriété pour effectuer une recherche sur plusieurs colonnes, mais pas toutes.

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script data-require="angular-filter@0.5.2" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl as vm">
  <input type="text" placeholder="enter your search text" ng-model="vm.searchText" />
   <table>
     <tr ng-repeat="row in vm.tableData | filterBy: ['col1','col2']: vm.searchText">
       <td>{{row.col1}}</td>
       <td>{{row.col2}}</td>
       <td>{{row.col3}}</td>
     </tr>
   </table>
   <p>This will show filter from <b>two columns</b> 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 <b>filter: vm.searchText</b></p>
  </body>
</html>

contrôleur

// 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'
      }
      ];
  })

})();
Répondu el 3 de Mai, 2017 par CredibleAshok (63 Points )

2voto

Geovani Anholete avatar
Geovani Anholete Points 184

J'ai résolu ce problème simplement :

<div ng-repeat="Object in List | filter: (FilterObj.FilterProperty1 ? {'ObjectProperty1': FilterObj.FilterProperty1} : '') | filter:(FilterObj.FilterProperty2 ? {'ObjectProperty2': FilterObj.FilterProperty2} : '')">
Répondu el 28 de Juin, 2019 par Geovani Anholete (184 Points )

2voto

Siddharth Singh avatar
Siddharth Singh Points 2693

Il y a un tas de bonnes solutions ici, mais je vous suggère d'emprunter l'autre voie. Si la recherche est la chose la plus importante et que la propriété "secret" n'est pas du tout utilisée sur la vue, mon approche serait d'utiliser le filtre angulaire intégré avec tous ses avantages et de faire simplement correspondre le modèle à un nouveau tableau d'objets.

Exemple de la question :

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

Maintenant, en html, il suffit d'utiliser le filtre régulier pour rechercher ces deux propriétés.

<div ng-repeat="member in people | filter: searchString">
Répondu el 20 de Février, 2016 par Siddharth Singh (2693 Points )

1voto

Tom Quinlan avatar
Tom Quinlan Points 11

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

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

Il retourne vrai si chaque mot est au moins dans 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);
    }
};
Répondu el 17 de Août, 2015 par Tom Quinlan (11 Points )

1voto

Gholamreza Fathpour avatar
Gholamreza Fathpour Points 21

Le filtre peut être un objet JavaScript avec des champs et vous pouvez avoir une expression comme :

ng-repeat= 'item in list | filter :{property:value}'
Répondu el 14 de Juillet, 2016 par Gholamreza Fathpour (21 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X