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

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?

Sie können verwenden

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

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

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.

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 :))

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>