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?
angularjs
ng-repeat
angularjs-filter
Tim Webster
quelle
quelle
Antworten:
Siehe das Beispiel auf der Filterseite . Verwenden Sie ein Objekt und legen Sie die Farbe in der Farbeigenschaft fest:
quelle
filter:{ color: '...', size: '...', ...}
Geben Sie die Eigenschaft (dh
colour
) an, auf die der Filter angewendet werden soll:quelle
'!'+
, wie diese<div ng-repeat="product in products | filter:{ colour: '!'+by_colour }">
<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".customFilter
kann ein einfaches Objekt auf Ihrem seinscope
, das Sie bei Bedarf aktualisieren. Überprüfen Sie diesen Plunker .Sie können nach einem Objekt filtern, dessen Eigenschaft mit den Objekten übereinstimmt, nach denen Sie filtern müssen:
Dies kann natürlich als Variable übergeben werden, wie Mark Rajcok vorgeschlagen hat.
quelle
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:
Sie können auch nach mehreren Eigenschaften eines Objekts filtern, indem Sie sie Ihrem Filterobjekt hinzufügen:
quelle
Der beste Weg, dies zu tun, ist die Verwendung einer Funktion:
html
Javascript
Alternativ können Sie ngHide oder ngShow verwenden, um Elemente basierend auf bestimmten Kriterien dynamisch ein- und auszublenden.
quelle
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
html
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.
quelle
<div ng-repeat="product in products | filter: { color: 'blue' }:true">
funktioniert nur bei exakten Übereinstimmungen (das 'wahre' am Ende ist das Vergleichsargument: linkSuche nach Farbe:
Sie können auch ein inneres Nest machen.
quelle
Wenn Sie Folgendes tun würden:
... 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:
quelle
Mein Weg ist das
So anzeigen
quelle
Sie müssen
filter:{color_name:by_colour}
anstelle von verwendenWenn Sie mit einer einzelnen Eigenschaft eines Objekts übereinstimmen möchten, schreiben Sie diese Eigenschaft anstelle des Objekts, da sonst eine andere Eigenschaft übereinstimmt.
quelle
Geben Sie im Filter die Eigenschaft des Objekts an, auf das Sie den Filter anwenden möchten:
Sie möchten den Filter jedoch nur auf den Vornamen anwenden
quelle
Wenn Sie nach einem Feld filtern möchten:
Wenn Sie für alle Felder filtern möchten:
und https://docs.angularjs.org/api/ng/filter/filter gut für Sie
quelle