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



Answers

También me gustaría mencionar una nueva funcionalidad de AngularJS ng-repeat , es decir, repetición especial de inicio y fin de puntos . Esa funcionalidad se agregó para repetir una serie de elementos HTML en lugar de solo un 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á definido) hasta la etiqueta HTML final donde se coloca ng-repeat-end (incluida la etiqueta con ng-repeat-end ).

Código de 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 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 se verí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 con ng-repeat-start ). Todas las propiedades especiales ng-repeat (en este caso $first y $index ) también funcionan como se esperaba.

Question

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

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

pero ¿cómo podemos usar ng-repeat para 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)
{
}

¿Hay una función incorporada que devuelve los valores de un diccionario como en c #?




Related