Comment utiliser ng-repeat pour les dictionnaires dans AngularJs?


285

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


1
Quelle est la différence entre un dictionnaire et un objet JSON? Je crois qu'il n'y en a pas en javascript!
markmarijnissen

8
@markmarijnissen: Un objet JSON a des règles de syntaxe plus strictes qu'un objet JavaScript . Et, comme nous sommes déjà dans Pedant's Corner, il n'y a pas de «dictionnaire» en JavaScript. Nous les appelons simplement des objets.
Paul D. Waite

Réponses:


556

Vous pouvez utiliser

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

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


53
Ce n'est pas ce que j'ai demandé mais exactement ce que je voulais. Merci Artem Andreev
Vural

1
Comment pouvons-nous utiliser le filtre dans cette répétition ng. Cela ne fonctionne pas dans mon cas lorsque j'utilise un filtre de recherche. Dites <input type = "text" ng-model = "searchText" /> <li ng-repeat = "(nom, âge) dans les éléments | filter: searchText"> {{name}}: {{age}} </ li> ...
Shekhar

1
@Shekhar Filter "filter" ne fonctionne qu'avec les tableaux. Vous pouvez essayer de créer une demande de fonctionnalité.
Artem Andreev

2
Bon de voir des points communs avec python :)
robert king

4
Vous pouvez obtenir la fonctionnalité de filtrage même sur les dictionnaires (objets) en utilisant l'instruction ng-if .. comme par exemple: <li ng-repeat = "(id, obj) dans les éléments" ng-if = 'obj.sex = "female "'> {{obj.name}} {{obj.surname}} </li> ... où items est un ensemble de personnes indexées par une clé.
giowild

27

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.


Erreur: [$ compile: uterdir] Attribut non terminé, trouvé 'ng-repeat-start' mais aucune correspondance 'ng-repeat-end' trouvée.
zloctb

@zloctb vous devez avoir ignoré <div ng-repeat-end>..</div>votre balisage
John Kaster

6

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


1
+1 pour underscore.js et ces informations utiles. Merci Johnny!
Vural

0

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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.