Cómo utilizar ng-repeat para diccionarios en AngularJS?

También me gustaría mencionar una nueva funcionalidad de AngularJS ng-repeat, es decir, especial repetir inicio y puntos finales. Esa funcionalidad se agregó para repetir una serie de elementos HTML en lugar de solo un elemento HTML primario .

Para utilizar los puntos de inicio y final del repetidor, debe definirlos utilizando las directivas ng-repeat-start y ng-repeat-end respectivamente.

La directiva ng-repeat-start funciona muy similar a ng-repeat directriz. La diferencia es que repetirá todos los elementos HTML (incluida la etiqueta en la que está definido) hasta la etiqueta HTML final donde se coloca ng-repeat-end (incluida la etiqueta con ng-repeat-end).

Código de ejemplo (de un controlador):

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

Ejemplo de plantilla 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 salida sería similar a la siguiente (dependiendo del estilo 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]
======================

Como puede ver, ng-repeat-start repite todos los elementos HTML (incluido el elemento por ng-repeat-start). Todas las propiedades especiales ng-repeat (en este caso $first y $index) también funcionan como se esperaba.

Los desarrolladores de JavaScript tienden a referirse a la estructura de datos anterior como un objeto o hash en lugar de un diccionario.

Su sintaxis anterior es incorrecta ya que está inicializando el objeto users como null. Supongo que esto es un error tipográfico, ya que el código debería decir:

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

Para recuperar todos los valores de un hash, debe iterar sobre él utilizando un bucle 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 planea hacer mucho trabajo con estructuras de datos en JavaScript, entonces el subrayado .js biblioteca definitivamente vale la pena echar un vistazo. El subrayado viene con un values método que realizará la tarea anterior para usted:

var values = _.values(users);

Yo no uso Angular, pero estoy bastante seguro de que habrá un método de conveniencia para iterar sobre los valores de un hash (ah, ahí vamos, Artem Andreev proporciona la respuesta anterior :))