Comment utiliser ng-repeat pour les dictionnaires dans AngularJs?

Je sais que nous pouvons facilement utiliser ng-repeat pour des objets json ou des tableaux comme:

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

mais comment pouvons-nous utiliser le ng-repeat pour les dictionnaires, par exemple:

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

Je veux l'utiliser avec le dictionnaire utilisateur:

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

C'est possible?. Si oui, comment puis-je le faire dans AngularJs?

Exemple pour ma question: en C # nous définissons des dictionnaires comme:

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)
{
}

Existe-t-il une fonction intégrée qui renvoie les valeurs d'un dictionnaire comme en c #?

Vous pouvez utiliser

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

Voir la documentation ngRepeat . Exemple: http://jsfiddle.net/WRtqV/1/

Je voudrais également mentionner une nouvelle fonctionnalité d' AngularJSng-repeat , à savoir les points de début et de fin de répétition spéciaux . Cette fonctionnalité a été ajoutée afin de répéter une série d'éléments HTML au lieu d'un seul élément HTML parent.

Pour utiliser les points de début et de fin du répéteur, vous devez les définir en utilisant respectivement les directives ng-repeat-startet ng-repeat-end.

La ng-repeat-startdirective fonctionne de manière très similaire à la ng-repeatdirective. La différence est qu'il répète tous les éléments HTML (y compris la balise sur laquelle il est défini) jusqu'à la balise HTML de fin où ng-repeat-endest placé (y compris la balise avec ng-repeat-end).

Exemple de code (provenant d'un contrôleur):

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

Exemple de modèle HTML:

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

La sortie ressemblerait à la suivante (selon le style HTML):

==== 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]
======================

Comme vous pouvez le voir, ng-repeat-startrépète tous les éléments HTML (y compris l'élément avec ng-repeat-start). Toutes ng-repeatles propriétés spéciales (dans ce cas $firstet $index) fonctionnent également comme prévu.

Les développeurs JavaScript ont tendance à se référer à la structure de données ci-dessus comme un objet ou un hachage au lieu d'un dictionnaire.

Votre syntaxe ci-dessus est incorrecte car vous initialisez l' usersobjet comme nul. Je suppose que c'est une faute de frappe, comme le code devrait le lire:

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

Pour récupérer toutes les valeurs d'un hachage, vous devez itérer dessus en utilisant une boucle for:

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;
};

Si vous prévoyez de faire beaucoup de travail avec les structures de données en JavaScript, la bibliothèque underscore.js vaut vraiment le détour. Underscore est livré avec une valuesméthode qui effectuera la tâche ci-dessus pour vous:

var values = _.values(users);

Je n'utilise pas Angular moi-même, mais je suis presque sûr qu'il y aura une méthode pratique pour itérer sur les valeurs d'un hachage (ah, c'est parti, Artem Andreev fournit la réponse ci-dessus :))

Dans Angular 7, l'exemple simple suivant fonctionnerait (en supposant que le dictionnaire se trouve dans une variable appelée d):

my.component.ts:

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

this.keys = Object.keys(d);

my.component.html: (affichera la liste des paires clé: valeur)

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