ng-repeat: Nach einzelnem Feld filtern

484

Ich habe eine Reihe von Produkten, die ich mit ng-repeat wiederhole und verwende

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

diese Produkte nach Farbe zu filtern. Der Filter funktioniert, aber wenn der Produktname / die Produktbeschreibung usw. die Farbe enthält, bleibt das Produkt nach dem Anwenden des Filters erhalten.

Wie stelle ich den Filter so ein, dass er nur auf das Farbfeld meines Arrays und nicht auf jedes Feld angewendet wird?

Tim Webster
quelle
Benutzerdefinierte Filter sind auch leistungsstark =), könnte Ihnen gefallen, Beispiel: noypi-linux.blogspot.com/2014/07/…
Noypi Gilas
Andere
andrew.fox
Tolle Arbeit Rechtschreibung Farbe richtig
MikeKulls

Antworten:

475

Siehe das Beispiel auf der Filterseite . Verwenden Sie ein Objekt und legen Sie die Farbe in der Farbeigenschaft fest:

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search"> 
Mark Rajcok
quelle
Danke Mark, gibt es irgendwelche Vorteile, wenn man es so macht, anstatt die unten vorgeschlagene Methode?
Tim Webster
7
@ Seglespaan, nicht wirklich. Möglicherweise ist die von bmleite und blesh vorgestellte Methode besser lesbar, da Sie sehen können, dass Sie nach Farbe filtern. Diese Methode ist kompakter, was nützlich sein kann, wenn Sie nach mehreren Eigenschaften suchen möchten und lieber kein langes Objekt im HTML haben filter:{ color: '...', size: '...', ...}
möchten
2
@ MarkRajcok, wie könnte ich nach mehreren Eigenschaften suchen und dabei die Vereinigung und nicht die Kreuzung betrachten?
Jetcom
2
@jetcom, benötigen Sie einen benutzerdefinierten Filter, siehe stackoverflow.com/a/13845135/215945
Mark Rajcok
1
Ich weiß nicht, ob das OP gefragt hat, wie ein Suchfeld erstellt werden soll und wie Werte in einer ng-Wiederholung herausgefiltert werden sollen, wenn sie auf Seite wiederholt werden. Die Antwort darunter scheint für die gestellte Frage am relevantesten zu sein.
Twknab
573

Geben Sie die Eigenschaft (dh colour) an, auf die der Filter angewendet werden soll:

<div ng-repeat="product in products | filter:{ colour: by_colour }">
bmleite
quelle
5
Was ist, wenn ich will? by_colour als Filter: {color :! by_colour} "
rjdmello
27
@rjdmello nur voranstellen '!'+, wie diese<div ng-repeat="product in products | filter:{ colour: '!'+by_colour }">
bmleite
3
Ich bin mir nicht sicher, ob ich es richtig verstanden habe, aber das erste, was mir in den Sinn kam, war: <div ng-repeat="product in products | filter:{ resultsMap.annie: '!!' }"> oder (etwas Äquivalentes) wie folgt: <div ng-repeat="product in products | filter:by">und auf dem Controller : $scope.by = { 'resultsMap.annie': '!!' };. Mit diesem zweiten Ansatz haben Sie mehr Kontrolle über die zu filternde Eigenschaft. Hinweis: '!!'bedeutet "nicht null".
Bmleite
2
@Federico, das customFilterkann ein einfaches Objekt auf Ihrem sein scope, das Sie bei Bedarf aktualisieren. Überprüfen Sie diesen Plunker .
Bmleite
1
Dies sollte die akzeptierte Antwort sein. Es ist das prägnanteste. Nun, außer dass 'Farbe' zu viele Vokale hat.
Rap
176

Sie können nach einem Objekt filtern, dessen Eigenschaft mit den Objekten übereinstimmt, nach denen Sie filtern müssen:

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'red' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});
<div ng-repeat="product in products | filter: { color: 'red' }"> 

Dies kann natürlich als Variable übergeben werden, wie Mark Rajcok vorgeschlagen hat.

Ben Lesh
quelle
2
Nehmen wir an, ich habe diese Art von scope.products: {id: 1, Name: 'test', Farbe: 'hellblau'}, {id: 2, Name: 'bob', Farbe: [{Vordergrund: schwarz, Hintergrund :Weiß}] }. Wie kann ich dann das Produkt basierend auf Farbe: Hintergrund filtern, um den Weißwert zu erhalten?
Gery
2
@Gery: Ehrlich gesagt, ich glaube nicht, dass du kannst. So oder so, mit Filter: Überhaupt ist es eine schlechte Praxis, IMO. Insofern bringt es Logik in Ihre Ansicht, die eigentlich in Ihrem Controller sein sollte und nicht sehr testbar ist.
Ben Lesh
Auf diese Weise können Sie die Filterung auf die Steuerung verschieben und das Modell erweitern. ozkary.com/2015/05/angularjs-value-mapping-with-dynamic.html .
Ozkary
106

Wenn Sie nach einem Enkelkind (oder tiefer) des angegebenen Objekts filtern möchten, können Sie Ihre Objekthierarchie weiter ausbauen. Wenn Sie beispielsweise nach 'thing.properties.title' filtern möchten, können Sie Folgendes tun:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

Sie können auch nach mehreren Eigenschaften eines Objekts filtern, indem Sie sie Ihrem Filterobjekt hinzufügen:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">
David Hansen
quelle
2
ist dies wie 'oder' Typ oder 'und' Filtertyp.
SMS
1
Dieselbe Frage ist, dass ein UND oder ein ODER beim Filtern von mehr als einer Eigenschaft?
Verlorene Übersetzung
1
für OR Filter nur Weg ist benutzerdefinierte Filter, denke ich
Dmitri Algazin
99

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

html

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

Javascript

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

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

Khader MA
quelle
64

Seien Sie vorsichtig mit dem Winkelfilter. Wenn Sie einen bestimmten Wert im Feld auswählen möchten, können Sie keinen Filter verwenden.

Beispiel:

Javascript

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

html

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

Dies wählt beide aus, da so etwas wie substr
Das bedeutet, dass Sie ein Produkt auswählen möchten, bei dem "Farbe" die Zeichenfolge "Blau" enthält und nicht, bei dem "Farbe" "Blau" ist.

Petr B.
quelle
88
<div ng-repeat="product in products | filter: { color: 'blue' }:true">funktioniert nur bei exakten Übereinstimmungen (das 'wahre' am Ende ist das Vergleichsargument: link
Mark
21

Suche nach Farbe:

<input type="text" ng-model="searchinput">
<div ng-repeat="product in products | filter:{color:searchinput}">

Sie können auch ein inneres Nest machen.

filter:{prop1:{innerprop1:searchinput}}
CyberNinja
quelle
10

Wenn Sie Folgendes tun würden:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

... Sie würden nicht nur Artikel von itemTypeId 2 und itemStatus 1 erhalten, sondern auch Artikel mit itemType 20, 22, 202, 123 und itemStatus 10, 11, 101, 123. Dies liegt daran, dass der Filter: {.. Die Syntax.} funktioniert so, als ob eine Zeichenfolge eine Abfrage enthält.

Wenn Sie jedoch die Bedingung : true hinzufügen , wird nach exakter Übereinstimmung gefiltert:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>
Phil
quelle
4

Mein Weg ist das

subjcts is

[{"id":"1","title":"GFATM"},{"id":"2","title":"Court Case"},{"id":"3","title":"Renewal\/Validity"},{"id":"4","title":"Change of Details"},{"id":"5","title":"Student Query"},{"id":"6","title":"Complains"}]

sub ist ein Eingabefeld oder was auch immer Sie möchten

So anzeigen

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>
Asad Ali Khan
quelle
Im Allgemeinen ist die Verwendung von ng-if eine saubere Lösung
Kilizo
4

Sie müssen filter:{color_name:by_colour}anstelle von verwenden

filter:by_colour

Wenn Sie mit einer einzelnen Eigenschaft eines Objekts übereinstimmen möchten, schreiben Sie diese Eigenschaft anstelle des Objekts, da sonst eine andere Eigenschaft übereinstimmt.

amit banerjee
quelle
1

Geben Sie im Filter die Eigenschaft des Objekts an, auf das Sie den Filter anwenden möchten:

//Suppose Object
var users = [{
  "firstname": "XYZ",
  "lastname": "ABC",
  "Address": "HOUSE NO-1, Example Street, Example Town"
},
{
  "firstname": "QWE",
  "lastname": "YUIKJH",
  "Address": "HOUSE NO-11, Example Street1, Example Town1"
}]

Sie möchten den Filter jedoch nur auf den Vornamen anwenden

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">
Neeraj Bansal
quelle
0

Wenn Sie nach einem Feld filtern möchten:

label>Any: <input ng-model="search.color"></label> <br>
<tr ng-repeat="friendObj in friends | filter:search:strict">

Wenn Sie für alle Felder filtern möchten:

 label>Any: <input ng-model="search.$"></label> <br>
 <tr ng-repeat="friendObj in friends | filter:search:strict">

und https://docs.angularjs.org/api/ng/filter/filter gut für Sie

milad dn
quelle