wake-up-neo.com

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

Ich weiß, dass wir ng-repeat für Json-Objekte oder Arrays wie:

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

aber wie können wir das ng-repeat 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 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 eingebaute Funktion, die die Werte aus einem Wörterbuch wie in c # zurückgibt?

280
Vural Acar

Sie können verwenden

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

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

549
Artem Andreev

Ich möchte auch eine neue Funktionalität von AngularJS ng-repeat erwähnen, nämlich die spezielle Wiederholung start und Endpunkte. Diese Funktionalität wurde hinzugefügt, um ein series von HTML-Elementen anstelle eines übergeordneten single-übergeordneten HTML-Elements zu wiederholen.

Um die Start- und Endpunkte des Repeaters verwenden zu können, müssen Sie sie mit den Anweisungen ng-repeat-start und ng-repeat-end definieren. 

Die ng-repeat-start-Direktive funktioniert sehr ähnlich wie die ng-repeat-Direktive. Der Unterschied besteht darin, dass all die HTML-Elemente (einschließlich des Tags, für das sie definiert ist) bis zum letzten HTML-Tag, an dem ng-repeat-end platziert wird (einschließlich des Tags mit ng-repeat-end) wiederholt wird.

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 für eine 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, wiederholt ng-repeat-start alle HTML-Elemente (einschließlich des Elements mit ng-repeat-start). Alle speziellen ng-repeat-Eigenschaften (in diesem Fall $first und $index) funktionieren ebenfalls wie erwartet.

27
Tom

JavaScript-Entwickler beziehen sich in der Regel auf die obige Datenstruktur als Objekt oder Hash anstelle eines Dictionary.

Ihre obige Syntax ist falsch, da Sie das users-Objekt als null initialisieren. Ich gehe davon aus, 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 mithilfe 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 vorhaben, viel mit Datenstrukturen in JavaScript zu arbeiten, ist die Bibliothek underscore.js definitiv einen Blick wert. Unterstrich kommt mit einer values-Methode , die die obige Aufgabe für Sie ausführt:

var values = _.values(users);

Ich benutze Angular nicht selbst, aber ich bin mir ziemlich sicher, dass es eine bequeme Methode gibt, um die Werte eines Hashes zu durchlaufen (ach, da gehen wir, Artem Andreev liefert die Antwort oben :)

6
JonnyReeves

In Winkel 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: Wertepaare an)

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