web-dev-qa-db-fra.com

Comment utiliser ng-repeat pour les dictionnaires dans AngularJs?

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

<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 utiliser ce dictionnaire avec les utilisateurs:

<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 les 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 #?

angularjsjsondictionaryangularjs-ng-repeat
280
Vural Acar

Vous pouvez utiliser

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

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

549
Artem Andreev

J'aimerais également mentionner une nouvelle fonctionnalité de AngularJS ng-repeat , à savoir les points de répétition spéciaux start et end. Cette fonctionnalité a été ajoutée afin de répéter une série d'éléments HTML au lieu d'un élément HTML unique parent.

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

La directive ng-repeat-start fonctionne de manière très similaire à la directive ng-repeat. La différence est que cela répétera tous les éléments HTML (y compris la balise sur laquelle il est défini) jusqu’à la balise HTML finale où ng-repeat-end est placé (y compris la balise avec ng-repeat-end).

Exemple de code (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 à ce qui suit (en fonction du 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 constater, ng-repeat-start répète tous les éléments HTML (y compris l'élément avec ng-repeat-start). Toutes les propriétés spéciales ng-repeat (dans ce cas, $first et $index) fonctionnent également comme prévu.

27
Tom

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

Votre syntaxe ci-dessus est fausse car vous initialisez l'objet users à null. Je suppose que c'est une faute de frappe, comme le code devrait se lire:

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

Pour récupérer toutes les valeurs d'un hachage, vous devez l'itérer à l'aide d'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 envisagez de travailler beaucoup avec des structures de données en JavaScript, la bibliothèque underscore.js vaut vraiment le détour. Underscore vient avec une méthode values 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 parcourir les valeurs d'un hachage (ah, voilà, Artem Andreev fournit la réponse ci-dessus :))

6
JonnyReeves

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

mon.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>
0
Ron Kalian