Comment utiliser ng-repeat pour les dictionnaires dans AngularJs?

Question

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

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

mais comment pouvons-nous utiliser la 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 les utilisateurs du dictionnaire:

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

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

Est-il une fonction qui retourne les valeurs d'un dictionnaire comme en c#?

Merci!!!!

Answer 1

Vous pouvez utiliser

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

Answer 2

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

Afin d'utiliser le répéteur de début et de fin, vous devez définir à l'aide de ng-repeat-start et ng-repeat-end directives respectivement.

L' ng-repeat-start directive fonctionne de manière très similaire à l' ng-repeat directive. La différence est que se répétera tous les éléments HTML (y compris le tag est défini sur) jusqu'à la fin de balise HTML où ng-repeat-end (y compris l'étiquette avec ng-repeat-end).

Exemple de code (à partir 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 gabarit 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 devrait ressembler à la suivante (selon le code HTML de style):

==== 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-start se répète tous les éléments HTML (y compris l'élément avec ng-repeat-start). Tous ng-repeat propriétés spéciales (dans ce cas - $first et $index), fonctionnent comme prévu.

Answer 3

Les développeurs JavaScript ont tendance à se référer au-dessus de la structure des données que ce soit un objet ou un hash au lieu d'un Dictionnaire.

Votre syntaxe ci-dessus est faux comme vous l'initialisation de l' users objet null. Je présume que c'est une faute de frappe, que le code devrait lire:

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

Pour récupérer toutes les valeurs à partir d'une table de hachage, vous devez parcourir à 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 prévoyez de faire beaucoup de travailler avec des données-structures en JavaScript puis l' underscore.js la bibliothèque est certainement en valeur un regard. Trait de soulignement est livré avec un values méthode qui va effectuer la tâche ci-dessus pour vous:

var values = _.values(users);

Je n'utilise pas Angulaire moi-même, mais je suis assez sûr qu'il y aura une méthode pratique de construire pour une itération sur un hachage de valeurs (ah, nous y voilà, Artem Andreev donne la réponse ci-dessus :))