Question ng-repeat: filtre par champ unique


J'ai un tableau de produits que je répète en utilisant ng-repeat et 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 ne s'appliquer qu'au champ de couleur de mon tableau plutôt qu'à chaque champ?


449
2018-02-06 15:52


origine


Réponses:


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

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

440
2018-02-06 15:58



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

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

553
2018-02-06 16:01



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

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 entendu être transmis par variable, comme l'a suggéré Mark Rajcok.


163
2018-02-06 16:00



Si vous souhaitez filtrer sur un petit-enfant (ou plus profond) de l'objet donné, vous pouvez continuer à créer votre hiérarchie d'objet. 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 en les ajoutant à votre objet de filtre:

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

99
2017-10-15 21:46



La meilleure façon de le 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 dynamiquement des éléments en fonction de certains critères.


88
2017-07-20 06:45



Soyez prudent avec le filtre angulaire. Si vous souhaitez sélectionner une valeur spécifique dans le champ, vous ne pouvez pas utiliser de 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 va sélectionner les deux, car utiliser quelque chose comme substr
 Cela signifie que vous voulez sélectionner un produit où "couleur" contient une chaîne "bleu" et non pas où "couleur" est "bleu".


61
2018-05-02 07:22



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

15
2018-05-01 18:19