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

ng-repeat array

Question

Sé que podemos usar fácilmente ng-repeat para objetos json o arreglos como:

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

pero, ¿cómo podemos usar ng-repeat 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 para mi pregunta: En C # definimos diccionarios como:

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 una función incorporada que devuelva los valores de un diccionario como en c #?

Answer 1

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 de los users como nulo. Supongo que este es un error tipográfico, ya que el código debe leer:

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

Para recuperar todos los valores de un hash, necesita iterar sobre él usando 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 planeas hacer mucho trabajo con estructuras de datos en JavaScript, entonces vale la pena echar un vistazo a la biblioteca underscore.js . El guión bajo viene con un método de values que realizará la tarea anterior por ti:

var values = _.values(users);

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

Answer 2

Puedes usar

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

Consulte la documentación de ngRepeat . Ejemplo: http://jsfiddle.net/WRtqV/1/

Answer 3

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

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

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

Código de muestra (desde 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 muestra:

<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 (según el 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 espera.