Ich führe eine einfache ng-repeat
JSON-Datei aus und möchte Kategorienamen erhalten. Es gibt ungefähr 100 Objekte, die jeweils zu einer Kategorie gehören - aber es gibt nur ungefähr 6 Kategorien.
Mein aktueller Code lautet:
<select ng-model="orderProp" >
<option ng-repeat="place in places" value="{{place.category}}">{{place.category}}</option>
</select>
Die Ausgabe umfasst 100 verschiedene Optionen, meist Duplikate. Wie überprüfe ich mit Angular, ob eine {{place.category}}
bereits vorhanden ist, und erstelle keine Option, wenn sie bereits vorhanden ist?
bearbeiten: In meinem Javascript $scope.places = JSON data
, nur um zu verdeutlichen
db.collection.distinct("places")
, was weitaus besser war, als es in Angular zu tun! Leider funktioniert das nicht bei allen.Antworten:
Sie können den eindeutigen Filter von AngularUI (Quellcode hier verfügbar: AngularUI-eindeutiger Filter ) verwenden und ihn direkt in den ng-Optionen (oder ng-repeat) verwenden.
quelle
angular.module('yourModule', ['ui', 'ui.filters']);
. War ratlos, bis ich einen Blick in die AngularUI js-Datei warf.unique
Filter kann derzeit als Teil von AngularJs UI Utilsangular.module('ui.filters')
in Ihren App-Namen ändern .Oder Sie können Ihren eigenen Filter mit lodash schreiben.
quelle
_.uniqBy(arr, field);
sollte für verschachtelte EigenschaftenSie können den Filter 'unique' (Aliase: uniq) im Modul angle.filter verwenden
Verwendung:
colection | uniq: 'property'
Sie können auch nach verschachtelten Eigenschaften filtern:
colection | uniq: 'property.nested_property'
Was Sie tun können, ist so etwas ..
HTML: Wir filtern nach Kunden-ID, dh entfernen doppelte Kunden
Ergebnis
Kundenliste:
foo 10
bar 20
baz 30
quelle
Dieser Code funktioniert für mich.
und dann
quelle
Wenn Sie Kategorien auflisten möchten, sollten Sie Ihre Absicht in der Ansicht explizit angeben.
in der Steuerung:
quelle
group by
Ausdruck inselect
Direktive.Hier ist ein einfaches und allgemeines Beispiel.
Der Filter:
Das Markup:
quelle
Cannot read property 'length' of undefined
in der Zeilel = arr.length
Ich beschloss, die Antwort von @ thethakuri zu erweitern, um dem einzigartigen Mitglied jede Tiefe zu geben. Hier ist der Code. Dies ist für diejenigen gedacht, die nicht das gesamte AngularUI-Modul nur für diese Funktionalität einbeziehen möchten. Wenn Sie AngularUI bereits verwenden, ignorieren Sie diese Antwort:
Beispiel
quelle
Ich hatte eine Reihe von Zeichenfolgen, keine Objekte, und ich habe diesen Ansatz verwendet:
mit diesem Filter:
quelle
AKTUALISIEREN
Ich habe die Verwendung von Set empfohlen, aber leider funktioniert dies weder für ng-repeat noch für Map, da ng-repeat nur mit Array funktioniert. Ignorieren Sie diese Antwort. Wenn Sie Duplikate auf die eine oder andere Weise herausfiltern müssen
angular filters
, finden Sie hier den Link zum Abschnitt " Erste Schritte" .Alte Antwort
Sie können die ECMAScript 2015 (ES6) -Standard-Set-Datenstruktur anstelle einer Array-Datenstruktur verwenden, um wiederholte Werte beim Hinzufügen zum Set zu filtern. (Denken Sie daran, dass Sätze keine wiederholten Werte zulassen.) Wirklich einfach zu bedienen:
quelle
Hier ist eine Möglichkeit nur für Vorlagen (die Reihenfolge wird jedoch nicht beibehalten). Außerdem wird auch das Ergebnis bestellt, was in den meisten Fällen nützlich ist:
quelle
Keiner der oben genannten Filter hat mein Problem behoben, sodass ich den Filter aus dem offiziellen Github-Dokument kopieren musste. Und dann verwenden Sie es wie in den obigen Antworten erläutert
Rückgabefunktion (items, filterOn) {
quelle
Es scheint, dass jeder seine eigene Version des
unique
Filters in den Ring wirft , also werde ich das Gleiche tun. Kritik ist sehr willkommen.quelle
Wenn Sie eindeutige Daten basierend auf dem verschachtelten Schlüssel erhalten möchten:
Nennen Sie es so:
quelle
Fügen Sie diesen Filter hinzu:
Aktualisieren Sie Ihr Markup:
quelle
Das mag übertrieben sein, aber es funktioniert bei mir.
Die eindeutige Funktion hängt von der oben definierten enthaltenen Funktion ab. Es kann so genannt werden, als
array.distinct(prop);
ob prop die Eigenschaft ist, die Sie unterscheiden möchten.Man könnte es also einfach sagen
$scope.places.distinct("category");
quelle
Erstellen Sie Ihr eigenes Array.
quelle