Angular.js ng-repeat Filter nach Eigenschaft mit einem von mehreren Werten (ODER von Werten)

Ist es möglich, ein Array von Objekten zu filtern, sodass der Wert der Eigenschaft einer von wenigen Werten sein kann (ODER-Bedingung) ohne einen benutzerdefinierten Filter zu schreiben

Dies ähnelt diesem Problem – Angular.js ng-repeat :filter by single field

Aber statt

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

ist es möglich, so etwas zu tun

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

für Beispieldaten wie folgt-

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

Ich habe es erfolglos versucht

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

Der beste Weg, dies zu tun, ist die Verwendung einer Funktion:

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

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

Alternativ können Sie verwenden ngHide oder ngShow um Elemente basierend auf bestimmten Kriterien dynamisch ein- und auszublenden.

Bei mir hat es wie folgt funktioniert:

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

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

Ich denke ng-if sollte arbeiten:

<div ng-repeat="product in products" ng-if="product.color === 'red' 
|| product.color === 'blue'">

Im HTML-Format:

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

Im Winkel:

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

Hier ist eine Möglichkeit, dies zu tun, während ein zusätzliches Argument übergeben wird:

https://stackoverflow.com/a/17813797/4533488 (Dank an 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>

Mit dem Backend:

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

.

Und noch ein anderer Weg nur mit einem In-Template-Filter:

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

Ich habe eine generischere Lösung mit der kantigsten Lösung gefunden, die ich mir vorstellen kann. Grundsätzlich können Sie Ihren eigenen Komparator an die Vorgabe übergeben filterFilter Funktion. Hier ist Plunker auch.

Nachdem ich keine gute universelle Lösung finden konnte, habe ich etwas Eigenes gemacht. Ich habe es nicht für eine sehr große Liste getestet.

Es kümmert sich um verschachtelte Schlüssel, Arrays oder so ziemlich alles.

Hier ist der github und Demo

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>