Anguleux.js ng-filtre de répétition par propriété ayant une des valeurs multiples (ou des 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é

c'est similaire à ce problème - angulaire.js ng-repeat: filtre par champ unique

mais au lieu de

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

est-il possible de faire quelque chose comme ça

<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') }">
46
demandé sur Community 2014-02-24 16:33:45

7 réponses

la meilleure façon de faire ceci 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 pour afficher et masquer dynamiquement des éléments basés sur un certain critère.

80
répondu Sherlock 2014-09-22 20:43:09

pour moi, cela a fonctionné comme indiqué ci-dessous..

<div ng-repeat="product in products | filter: { color: 'red'} | filter: { color:'blue' }">
24
répondu Amol Aranke 2016-09-03 19:25:17

j'chose "ng-si" devrait fonctionner:

<div ng-repeat="product in products" ng-if="product.color === 'red' 
|| product.color === 'blue'">
13
répondu jbrook10 2016-04-04 18:54:21

en HTML:

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

En Angle:

$scope.colorFilter = function (item) { 
  if (item.color === 'red' || item.color === 'blue') {
  return item;
 }
};
9
répondu bboyonly 2016-02-24 23:12:24

Voici une façon de le faire en passant dans 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 une autre façon avec un filtre dans le modèle seulement:

https://stackoverflow.com/a/12528093/4533488 (merci à 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>

5
répondu aero 2017-05-23 12:10:41

après n'avoir pas pu trouver une bonne solution universelle, j'ai fait quelque chose moi-même. Je ne l'ai pas testé pour une très grande liste.

il prend soin de clés imbriquées, tableaux ou à peu près n'importe quoi.

, Voici le 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>
0
répondu Raj Sharma 2018-06-12 10:03:27