ng-repeat : filtre par champ unique

Question

J'ai un tableau de produits que je répète à l'aide de ng-repeat et je me sers de

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

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

Comment puis-je configurer le filtre pour qu'il s'applique uniquement au champ de couleur de mon tableau plutôt qu'à tous les champs ?

Answer 1

Spécifiez la propriété (c'est-à-dire colour ) où vous voulez que le filtre soit appliqué :

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

Answer 2

Voir l'exemple sur le filtre page. 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">

Answer 3

Vous pouvez filtrer sur un objet dont la propriété correspond 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' }"> 

Cela peut bien sûr être transmis par variable, comme l'a suggéré Mark Rajcok.

Answer 4

Si vous voulez filtrer sur un petit-enfant (ou plus profond) de l'objet donné, vous pouvez continuer à construire votre hiérarchie d'objets. Par exemple, si vous souhaitez filtrer sur "thing.properties.title", vous pouvez procéder comme suit :

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

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

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

Answer 5

Attention au filtre angulaire. Si vous voulez sélectionner une valeur spécifique dans un 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 permettra de sélectionner les deux, car utilisez quelque chose comme substr
Cela signifie que vous voulez sélectionner les produits dont la "couleur" contient la chaîne "bleu" et non ceux dont la "couleur" est "bleu".