web-dev-qa-db-fra.com

ng-repeat: filtrer par un seul champ

J'ai une gamme de produits que je répète sur l'utilisation de ng-repeat et j'utilise 

<div ng-repeat="product in products | filter:by_colour">

filtrer ces produits par couleur. Le filtre fonctionne, mais si le nom du produit/description etc. contient la couleur, le produit reste après l'application du filtre.

Comment définir le filtre pour qu'il s'applique uniquement au champ de couleur de mon tableau plutôt qu'à tous les champs?

angularjsng-repeatangularjs-filter
463
Tim Webster

Voir l'exemple sur la page filter . Utilisez un objet et définissez la couleur dans la propriété color:

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search">
461
Mark Rajcok

Spécifiez la propriété (c'est-à-dire colour) à laquelle vous souhaitez appliquer le filtre:

<div ng-repeat="product in products | filter:{ colour: by_colour }">
564
bmleite

Vous pouvez filtrer par un objet avec une propriété correspondant aux objets que vous devez filtrer:

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'red' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

<div ng-repeat="product in products | filter: { color: 'red' }">

Ceci peut bien sûr être passé variable, comme suggéré par Mark Rajcok.

170
Ben Lesh

Si vous souhaitez filtrer sur un petit-enfant (ou plus profond) de l'objet donné, vous pouvez continuer à développer votre hiérarchie d'objets. Par exemple, si vous souhaitez filtrer sur 'thing.properties.title', vous pouvez effectuer les opérations suivantes:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

Vous pouvez également filtrer sur plusieurs propriétés d'un objet simplement en les ajoutant à votre objet filtre:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">
103
David Hansen

La meilleure façon de faire est d’utiliser une fonction:

html 

<div ng-repeat="product in products | filter: myFilter">

javascript 

$scope.myFilter = function (item) { 
    return item === 'red' || item === 'blue'; 
};

Vous pouvez également utiliser ngHide ou ngShow pour afficher et masquer de manière dynamique des éléments en fonction de certains critères.

93
Khader M A

Soyez prudent avec le filtre angulaire. Si vous souhaitez sélectionner une valeur spécifique dans le champ, vous ne pouvez pas utiliser le filtre.

Exemple:

javascript 

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

html 

<div ng-repeat="product in products | filter: { color: 'blue' }">

Cela sélectionnera les deux, car utilisez quelque chose comme substr
Cela signifie que vous voulez sélectionner un produit où "couleur" contient la chaîne "bleu" et non où "couleur" est "bleu".

62
Petr B.

Recherche par couleur: 

<input type="text" ng-model="searchinput">
<div ng-repeat="product in products | filter:{color:searchinput}">

vous pouvez aussi faire un nid intérieur.

filter:{prop1:{innerprop1:searchinput}}
17
CyberNinja

Si vous deviez faire ce qui suit:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

... vous obtiendrez non seulement les éléments de itemTypeId 2 et itemStatus 1, mais vous obtiendrez également des éléments de types d'élément 20, 22, 202, 123 et itemStatus 10, 11, 101, 123. C'est parce que le filtre: .} la syntaxe fonctionne comme une chaîne contenant une requête.

Cependant, si vous ajoutiez la condition: true , cela filtrerait par correspondance exacte:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>
9
Phil

Tu dois utiliser filter:{color_name:by_colour} au lieu de

filter:by_colour

Si vous souhaitez faire correspondre une propriété unique d'un objet, écrivez cette propriété plutôt que l'objet, sinon une autre propriété sera mise en correspondance.

4
amit banerjee

mon chemin est-ce

subjcts is

[{"id":"1","title":"GFATM"},{"id":"2","title":"Court Case"},{"id":"3","title":"Renewal\/Validity"},{"id":"4","title":"Change of Details"},{"id":"5","title":"Student Query"},{"id":"6","title":"Complains"}]

sous est un champ d'entrée ou ce que vous aimez

Afficher comme ça

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>
4
Asad Ali Khan

Spécifiez la propriété dans le filtre, de l'objet sur lequel vous voulez appliquer le filtre:

//Suppose Object
var users = [{
  "firstname": "XYZ",
  "lastname": "ABC",
  "Address": "HOUSE NO-1, Example Street, Example Town"
},
{
  "firstname": "QWE",
  "lastname": "YUIKJH",
  "Address": "HOUSE NO-11, Example Street1, Example Town1"
}]

Mais vous souhaitez appliquer le filtre uniquement sur le prénom 

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">
1
Neeraj Bansal

Si vous voulez filtrer pour un champ:

label>Any: <input ng-model="search.color"></label> <br>
<tr ng-repeat="friendObj in friends | filter:search:strict">

Si vous voulez filtrer pour tous les champs:

 label>Any: <input ng-model="search.$"></label> <br>
 <tr ng-repeat="friendObj in friends | filter:search:strict">

et https://docs.angularjs.org/api/ng/filter/filter bon pour vous

0
milad dn