¿Cómo usar ng-repeat para diccionarios en AngularJs?

Question

sé que podemos utilizar simplemente ng repetición de objetos JSON o arreglos como:

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

pero ¿cómo podemos utilizar el ng-repetición para los diccionarios, por ejemplo:

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

Quiero usar eso con el diccionario de usuarios:

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

¿Es posible ?. Si es así, ¿cómo puedo hacerlo en AngularJs?

Ejemplo de mi pregunta: En C# definimos como diccionarios:

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

¿Hay una función de acumulación en el que devuelve los valores de un diccionario como en C#?

Answer 1

Puede utilizar

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

Ver ngRepeat documentation. Ejemplo: http://jsfiddle.net/WRtqV/1/

Answer 2

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 nulo. Supongo que esto es un error, ya que el código debe decir:

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

Para recuperar todos los valores de un hash, es necesario iterar sobre ella utilizando un bucle:

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 va Al hacer mucho trabajo con estructuras de datos en JavaScript, vale la pena echar un vistazo a la biblioteca underscore.js. Subrayado viene con un values method que llevará a cabo la tarea anterior para usted:

var values = _.values(users); 

No consumo angular a mí mismo, pero estoy bastante seguro de que habrá un método de conveniencia en la construcción para iterar sobre los valores de un hash (ah, ahí vamos, Artem Andreev proporciona la respuesta anterior :))

Answer 3

también me gustaría hablar de una nueva funcionalidad de AngularJS ng-repeat, es decir, la repetición especial empezar y puntos finales. Esa funcionalidad se agregó para repetir un serie de elementos HTML en lugar de solo un elemento HTML padre único.

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

La directiva ng-repeat-start funciona de manera muy similar a la directiva ng-repeat.La diferencia es que se va a repetir todos los 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 la muestra (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}; 
// ... 

plantilla HTML de ejemplo:

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

salida será similar a la siguiente (en función 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 con ng-repeat-start). Todas las propiedades especiales ng-repeat (en este caso $first y $index) también funcionan como se esperaba.