Wie verwende ich ng-repeat für Wörterbücher in AngularJs?

285

Ich weiß, dass wir ng-repeat leicht für json-Objekte oder Arrays verwenden können, wie:

<div ng-repeat="user in users"></div>

Aber wie können wir die ng-Wiederholung für Wörterbücher verwenden, zum Beispiel:

var users = null;
users["182982"] = "{...json-object...}";
users["198784"] = "{...json-object...}";
users["119827"] = "{...json-object...}";

Ich möchte das mit dem Benutzerwörterbuch verwenden:

<div ng-repeat="user in users"></div>

Ist es möglich?. Wenn ja, wie kann ich das in AngularJs machen?

Beispiel für meine Frage: In C # definieren wir Wörterbücher wie:

Dictionary<key,value> dict = new Dictionary<key,value>();

//and then we can search for values, without knowing the keys
foreach(var val in dict.Values)
{
}

Gibt es eine integrierte Funktion, die die Werte aus einem Wörterbuch wie in c # zurückgibt?

Vural
quelle
1
Was ist der Unterschied zwischen einem Wörterbuch und einem JSON-Objekt? Ich glaube, es gibt keine in Javascript!
Markmarijnissen
8
@markmarijnissen: Ein JSON-Objekt hat strengere Syntaxregeln als ein JavaScript-Objekt . Und da wir bereits in Pedant's Corner sind, gibt es in JavaScript kein „Wörterbuch“. Wir nennen sie einfach Objekte.
Paul D. Waite

Antworten:

556

Sie können verwenden

<li ng-repeat="(name, age) in items">{{name}}: {{age}}</li>

Siehe ngRepeat-Dokumentation . Beispiel: http://jsfiddle.net/WRtqV/1/

Artem Andreev
quelle
53
Dies ist nicht das, was ich gefragt habe, sondern genau das, was ich wollte. Vielen Dank, dass Sie Artem Andreev
Vural
1
Wie können wir Filter in dieser ng-Wiederholung verwenden? In meinem Fall funktioniert es nicht, wenn ich einen Suchfilter verwende. Sagen Sie <input type = "text" ng-model = "searchText" /> <li ng-repeat = "(Name, Alter) in items | filter: searchText"> {{name}}: {{age}} </ li> ...
Shekhar
1
@ Shekhar Filter "Filter" funktioniert nur mit Arrays. Sie können versuchen, eine Funktionsanforderung zu erstellen.
Artem Andreev
2
Gut, einige Gemeinsamkeiten mit Python zu sehen :)
Robert King
4
Sie können die Filterfunktion auch für Wörterbücher (Objekte) verwenden, indem Sie die Anweisung ng-if verwenden. Beispiel: <li ng-repeat = "(id, obj) in den Elementen" ng-if = 'obj.sex = "female "'> {{obj.name}} {{obj.surname}} </ li> ... wobei items eine Gruppe von Personen ist, die durch einen Schlüssel indiziert sind.
Giowild
27

Ich möchte auch eine neue Funktionalität von AngularJSng-repeat erwähnen , nämlich spezielle Start- und Endpunkte für Wiederholungen . Diese Funktionalität wurde hinzugefügt, um eine Reihe von HTML-Elementen anstelle eines einzelnen übergeordneten HTML-Elements zu wiederholen .

Um Punkte Verwendung Repeater Anfang und am Ende müssen Sie sie definieren , indem Sie mit ng-repeat-startund ng-repeat-endjeweils Richtlinien.

Die ng-repeat-startRichtlinie funktioniert sehr ähnlich wie die ng-repeatRichtlinie. Der Unterschied besteht darin, dass alle HTML-Elemente (einschließlich des Tags, für das sie definiert sind) bis zum Ende des HTML-Tags wiederholt werden, an dem sie ng-repeat-endplatziert sind (einschließlich des Tags mit ng-repeat-end).

Beispielcode (von einem Controller):

// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...

Beispiel-HTML-Vorlage:

<div ng-repeat-start="(id, user) in users">
    ==== User details ====
</div>
<div>
    <span>{{$index+1}}. </span>
    <strong>{{id}} </strong>
    <span class="name">{{user.name}} </span>
    <span class="age">({{user.age}})</span>
</div>

<div ng-if="!$first">
   <img src="/some_image.jpg" alt="some img" title="some img" />
</div>
<div ng-repeat-end>
    ======================
</div>

Die Ausgabe würde wie folgt aussehen (abhängig vom HTML-Stil):

==== User details ====
1.  119827 Stephan (18)
======================
==== User details ====
2.  182982 John (30)
[sample image goes here]
======================
==== User details ====
3.  198784 Antonio (32)
[sample image goes here]
======================

Wie Sie sehen können, werden ng-repeat-startalle HTML-Elemente (einschließlich des Elements mit ng-repeat-start) wiederholt . Alle ng-repeatspeziellen Eigenschaften (in diesem Fall $firstund $index) funktionieren ebenfalls wie erwartet.

Tom
quelle
Fehler: [$ compile: uterdir] Nicht abgeschlossenes Attribut, gefunden 'ng-repeat-start', aber kein passendes 'ng-repeat-end' gefunden.
Zloctb
@ Zloctb Sie müssen <div ng-repeat-end>..</div>in Ihrem Markup übersprungen haben
John Kaster
6

JavaScript-Entwickler neigen dazu, die obige Datenstruktur entweder als Objekt oder als Hash anstelle eines Wörterbuchs zu bezeichnen.

Ihre obige Syntax ist falsch, da Sie das usersObjekt als null initialisieren . Ich nehme an, dass dies ein Tippfehler ist, da der Code lauten sollte:

// Initialize users as a new hash.
var users = {};
users["182982"] = "...";

Um alle Werte aus einem Hash abzurufen, müssen Sie ihn mit einer for-Schleife durchlaufen:

function getValues (hash) {
    var values = [];
    for (var key in hash) {

        // Ensure that the `key` is actually a member of the hash and not
        // a member of the `prototype`.
        // see: http://javascript.crockford.com/code.html#for%20statement
        if (hash.hasOwnProperty(key)) {
            values.push(key);
        }
    }
    return values;
};

Wenn Sie viel mit Datenstrukturen in JavaScript arbeiten möchten, ist die Bibliothek underscore.js auf jeden Fall einen Blick wert. Der Unterstrich enthält eine valuesMethode , mit der die oben genannte Aufgabe für Sie ausgeführt wird:

var values = _.values(users);

Ich benutze Angular selbst nicht, aber ich bin mir ziemlich sicher, dass es eine praktische Methode geben wird, um die Werte eines Hashs zu durchlaufen (ah, los geht's, Artem Andreev liefert die Antwort oben :))

JonnyReeves
quelle
1
+1 für underscore.js und diese nützlichen Informationen. Vielen Dank, Johnny!
Vural
0

In Angular 7 würde das folgende einfache Beispiel funktionieren (vorausgesetzt, das Wörterbuch befindet sich in einer Variablen namens d):

my.component.ts:

keys: string[] = [];  // declaration of class member 'keys'
// component code ...

this.keys = Object.keys(d);

my.component.html: (zeigt eine Liste der Schlüssel: Wert-Paare an)

<ul *ngFor="let key of keys">
    {{key}}: {{d[key]}}
</ul>
Ron Kalian
quelle