it-swarm.com.de

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

Ist es möglich, ein Array von Objekten so zu filtern, dass der Wert einer Eigenschaft einen der folgenden Werte haben kann (ODER-Bedingung) , ohne einen benutzerdefinierten Filter zu schreiben.

Dies ist ähnlich zu diesem Problem - Angular.js ng-repeat: Nach Einzelfeld filtern

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 ein beispiel daten 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') }">
50
Yogesh Mangaj

Am besten verwenden Sie dazu eine Funktion:

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

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

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

85
Sherlock

Für mich funktionierte es wie unten angegeben ..

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

25
Amol Aranke

Ich sache "ng-if" sollte funktionieren:

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

In HTML:

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

In Angular:

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

So können Sie dies tun, während Sie ein zusätzliches Argument übergeben:

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

6
aero

Ich habe eine allgemeinere Lösung mit der eckigsten Lösung gefunden, die ich mir vorstellen kann. Grundsätzlich können Sie Ihren eigenen Komparator an die Standardfunktion filterFilter übergeben. Hier ist auch plunker .

3
s.alem

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

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

Hier ist die 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>
0
Raj Sharma