ng-repeat: filtrer par champ unique

J'ai une gamme 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 définir le filtre pour qu'il s'applique uniquement au champ de couleur de ma matrice plutôt qu'à chaque champ?

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

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

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

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

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

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

Alternativement, vous pouvez utiliser ngHide ou ngShow pour afficher et masquer dynamiquement des éléments en fonction de certains critères.

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 sélectionnera les deux, car utiliser quelque chose comme substr
Cela signifie que vous voulez sélectionner le produit où "couleur" contient la chaîne "bleu" et non où "couleur" est "bleu".

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

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 des éléments de itemTypeId 2 et itemStatus 1, mais vous obtiendrez également des éléments avec itemType 20, 22, 202, 123 et itemStatus 10, 11, 101, 123. Cela est dû au fait que le filtre: {.. .} la syntaxe fonctionne comme une chaîne contient une requête.

Cependant, si vous ajoutiez la condition : true , elle 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>

ma façon est la suivante

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 tout ce que vous aimez

Affichage comme ceci

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

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

filter:by_colour

Si vous souhaitez faire correspondre avec une seule propriété d'un objet, écrivez cette propriété au lieu de l'objet, sinon une autre propriété obtiendra une correspondance.

Spécifiez la propriété dans le filtre, de l'objet sur lequel vous souhaitez 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}">

Si vous souhaitez filtrer pour un champ:

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

Si vous souhaitez filtrer 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