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

Lesezeit: 4 Minuten

Benutzeravatar von Yogesh Mangaj
Yogesh Mangaj

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

  • Könnte Ihnen helfen stackoverflow.com/questions/15868248/…

    – Satpal

    24. Februar 2014 um 12:35 Uhr

  • siehe meine Antwort – stackoverflow.com/questions/27606595/…

    – Ravindra Vairagi

    16. September 2016 um 5:07 Uhr

  • Beantwortet das deine Frage? So filtern Sie mehrere Werte (ODER-Verknüpfung) in angleJS

    – Weg

    6. August 2020 um 4:33 Uhr

Sherlocks Benutzeravatar
Sherlock

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.

  • Abgesehen von einer Funktion oder einem benutzerdefinierten Filter gibt es keine Möglichkeit, dies inline zu tun? ngHide setzt die display zu noneaber die div wird generiert und in das DOM eingefügt. Wie auch immer, ich denke, die Funktion ist der sauberste Weg, es zu tun, war nur neugierig, ob es eine Syntax gab, um eine OR-Bedingung inline anzugeben.

    – Yogesh Mangaj

    24. Februar 2014 um 13:00 Uhr


  • @Sherlock Um genauer zu sein, sollten Sie das Farbattribut hinzufügen: $scope.myFilter = function (item) { return item.color === 'red' || item.color === 'blue'; };

    – jDelforge

    5. September 2019 um 2:43 Uhr


Benutzeravatar von Amol Aranke
Amol Aranke

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

  • Wäre das nicht eher eine “und”-Bedingung?

    – Schikyo

    10. Oktober 2017 um 17:16 Uhr

Benutzeravatar von jrock10
jrock10

Ich denke ng-if sollte arbeiten:

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

  • Das funktioniert, aber $index bezieht sich auf den ursprünglichen Array-Index

    – Emathias

    25. Januar 2018 um 10:19 Uhr

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

Benutzeravatar von aero
Aero

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>

Benutzeravatar der Community
Gemeinschaft

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.

Benutzeravatar von Raj Nandan Sharma
Raj Nandan Sharma

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>

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

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy