Angular.js ng-repeat filtre par bien d'avoir l'une des valeurs multiples (OU de valeurs)

Est-il possible de filtrer un tableau d'objets, tels que la valeur de la propriété peut être de quelques valeurs (OU condition) sans écrire un filtre personnalisé

Ceci est similaire à ce problème - Angular.js ng-repeat :filtre par un seul champ

Mais au lieu de 

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

est-il possible de faire quelque chose comme ceci

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

pour un échantillon de données comme suit-

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

J'ai essayé, sans succès, 

<div ng-repeat="product in products | filter: { color: ('red'||'blue') }">
InformationsquelleAutor Yogesh Mangaj | 2014-02-24
  1. 89

    Meilleure façon de le faire est d'utiliser une fonction:

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

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

    Alternativement, vous pouvez utiliser ngHide ou ngShow dynamique d'afficher et de masquer des éléments basés sur un certain nombre de critères.

    • En dehors d'une fonction ou d'un filtre personnalisé est-il aucun moyen de le faire inline? ngHide va définir le display à none, mais le div sera générée et inséré dans les DOM. De toute façon je pense que la fonction est la façon la plus propre de le faire, ne fut curieux de savoir si il y avait une syntaxe pour spécifier une condition OU inline.
    InformationsquelleAutor Sherlock
  2. 29

    Pour moi, il a travaillé comme indiqué ci-dessous..

    JS:

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

    • Ne serait-ce pas plus comme une condition "et"?
    • Cela n'a pas fonctionné avec ng-options
    InformationsquelleAutor Amol Aranke
  3. 14

    J'chose "ng-si" devrait fonctionner:

    <div ng-repeat="product in products" ng-if="product.color === 'red' 
|| product.color === 'blue'">
    • Cela fonctionne, mais $index fera référence à l'origine d'index de tableau
    InformationsquelleAutor jbrook10
  4. 9

    En HTML:

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

    Angulaire:

    $scope.colorFilter = function (item) { 
  if (item.color === 'red' || item.color === 'blue') {
  return item;
 }
};
    • Merci, mais si vous lisez bien la question que je voulais une solution de sans avoir à écrire un filtre personnalisé
    InformationsquelleAutor bboyonly
  5. 7

    Ici est une façon de le faire en passant un argument supplémentaire:

    https://stackoverflow.com/a/17813797/4533488 (merci à Denis Pshenov)

    <div ng-repeat="group in groups">
    <li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)">
        <span>{{friend.name}}</span>
    <li>
</div>

    Avec le backend: 

    $scope.weDontLike = function(name) {
    return function(friend) {
        return friend.name != name;
    }
}

    .

    Et encore d'une autre façon avec un modèle de filtre seulement:

    https://stackoverflow.com/a/12528093/4533488 (grâce à mikel)

    <div ng:app>
  <div ng-controller="HelloCntl">
    <ul>
       <li ng-repeat="friend in friends | filter:{name:'!Adam'}">
            <span>{{friend.name}}</span>
            <span>{{friend.phone}}</span>
        </li>
    </ul>
</div>

    InformationsquelleAutor aero
  6. 3

    J'ai trouvé un plus générique solution avec le plus angulaires-native solution je pense. Fondamentalement, vous pouvez passer votre propre comparaison de la valeur par défaut filterFilter fonction. Voici plunker ainsi.

    InformationsquelleAutor s.alem
  7. 0

    Après pas en mesure de trouver une bonne solution universelle à ce problème j'ai fait quelque chose de mon propre. Je ne l'ai pas testé pour une très grande liste.

    Il prend soin de clés imbriquées,des tableaux ou juste au sujet de quoi que ce soit.

    Ici est la github et démo

    app.filter('xf', function() {
function keyfind(f, obj) {
if (obj === undefined)
return -1;
else {
var sf = f.split(".");
if (sf.length <= 1) {
return obj[sf[0]];
} else {
var newobj = obj[sf[0]];
sf.splice(0, 1);
return keyfind(sf.join("."), newobj)
}
}
}
return function(input, clause, fields) {
var out = [];
if (clause && clause.query && clause.query.length > 0) {
clause.query = String(clause.query).toLowerCase();
angular.forEach(input, function(cp) {
for (var i = 0; i < fields.length; i++) {
var haystack = String(keyfind(fields[i], cp)).toLowerCase();
if (haystack.indexOf(clause.query) > -1) {
out.push(cp);
break;
}
}
})
} else {
angular.forEach(input, function(cp) {
out.push(cp);
})
}
return out;
}
})

    HTML 

    <input ng-model="search.query" type="text" placeholder="search by any property">
<div ng-repeat="product in products |  xf:search:['color','name']">
...
</div>
    InformationsquelleAutor Raj Sharma