ng-repeat: filtre par champ unique

j'ai un tableau de produits que je répète en utilisant ng-repeat et que j'utilise

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

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

comment configurer le filtre pour qu'il s'applique uniquement au champ de couleur de mon réseau plutôt qu'à chaque champ?

454
demandé sur Damjan Pavlica 2013-02-06 19:52:09
la source

12 ответов

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"> 
446
répondu Mark Rajcok 2018-04-13 18:24:42
la source

spécifiez la propriété (i.e. colour ) où vous voulez que le filtre soit appliqué:

<div ng-repeat="product in products | filter:{ colour: by_colour }">
556
répondu bmleite 2013-02-06 20:01:04
la source

vous pouvez filtrer par un objet avec une propriété correspondant aux objets que vous avez à filtrer sur elle:

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' }"> 

cela peut évidemment être passé par variable, comme Mark Rajcok l'a suggéré.

164
répondu Ben Lesh 2013-02-07 09:02:40
la source

Si vous voulez filtrer sur un petit-enfant (ou plus) de l'objet donné, vous pouvez continuer à construire votre hiérarchie d'objets. Par exemple, si vous voulez filtrer sur 'chose.propriété.titre', vous pouvez faire ce qui suit:

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

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

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">
100
répondu David Hansen 2014-10-16 01:53:03
la source

la meilleure façon de faire ceci est d'utiliser une fonction:

html

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

javascript

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

alternativement, vous pouvez utiliser nghide ou ngShow pour afficher et masquer dynamiquement des éléments basés sur un certain critère.

89
répondu Khader M A 2016-03-03 12:45:02
la source

attention avec un filtre angulaire. Si vous voulez sélectionner une valeur spécifique dans le champ, vous ne pouvez pas utiliser filter.

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 va sélectionner les deux, parce que l'utilisation quelque chose comme substr

qui signifie que vous voulez sélectionner le produit où "Couleur" contient chaîne de caractères "bleu" et non où la "couleur" est "bleu".

61
répondu Petr B. 2016-03-03 12:44:36
la source

recherche par couleur:

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

vous pouvez faire un nid intérieur aussi.

filter:{prop1:{innerprop1:searchinput}}
16
répondu CyberNinja 2018-03-22 02:59:25
la source

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 obtiendriez non seulement des articles de type itemTypeId 2 et itemStatus 1, mais vous obtiendriez aussi des articles de type itemType 20, 22, 202, 123 et itemStatus 10, 11, 101, 123. C'est parce que le filtre: {...} la syntaxe fonctionne comme une chaîne de caractères contient la requête.

Cependant, si vous ajoutez le : true "151980920 l'état", il ne filtre 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
répondu Phil 2016-09-29 12:22:19
la source

my way " est cette

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"}]

sub est un champ D'entrée ou ce que vous aimez ""

Affichage comme ceci

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>
4
répondu Asad Ali Khan 2016-04-11 14:05:38
la source

vous devez utiliser filter:{color_name:by_colour} au lieu de

filter:by_colour

si vous voulez faire correspondre avec une seule propriété d'un objet, alors écrivez cette propriété à la place de l'objet, sinon une autre propriété aura correspondance.

4
répondu amit banerjee 2017-03-17 23:25:56
la source

spécifier la propriété dans filter, de l'objet sur lequel vous voulez appliquer filter:

//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 voulez 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
répondu Neeraj Bansal 2018-02-13 09:57:28
la source

si vous voulez un filtre pour un champ:

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

si vous voulez un filtre 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
répondu milad dn 2018-07-20 14:08:18
la source

Autres questions sur angularjs angularjs-filter ng-repeat