¿Cómo representaría una lista de definición dinámica usando AngularJS?

Question

¿Cómo representaría una lista de definición dinámica usando AngularJS?

Ejemplo:

datos:

[ 
    { 
     key: 'a', 
     value: 'x' 
    }, { 
     key: 'b', 
     value: 'y' 
    } 
] 

HTML deseado:

<dl> 
    <dt>a</dt> 
    <dd>x</dd> 
    <dt>b</dt> 
    <dd>y</dd> 
</dl> 

El ejemplo de la http://docs.angularjs.org/tutorial/step_08:

<dl> 
    <dt>Availability</dt> 
    <dd ng-repeat="availability in phone.availability">{{availability}}</dd> 
</dl> 

obras para una serie dinámica de DDS y una nu estático mber de dts, pero no un número dinámico de ambos.

Answer 1

Una nueva característica que permite ng-repeat-start/ng-repetir-end se añadió en angular 1.2.

Con esta función, se puede escribir el código HTML siguiente manera:

<dl> 
    <dt ng-repeat-start="i in items">{{i.key}}</dt> 
    <dd ng-repeat-end>{{i.value}}</dd> 
</dl> 

Ver this plnkr para un ejemplo de trabajo completa.

Answer 2

Este es un problema, porque hay que envolverlo con algún elemento con el fin de hacer repetir. Y eso no va a ser un HTML válido - se podrían obtener en el mismo problema con las listas o tablas desordenadas ...

<dl> 
    <div ng-repeat="i in items"> 
    <dt>{{i.key}}</dt> 
    <dd>{{i.value}}</dd> 
    </div> 
</dl> 

supongo que la div dentro dl no está permitido por la especificación, pero funciona - al menos en cromo: -D

Tenemos la intención de apoyar ng-repeat dentro de un comentario para apoyar esto.

Answer 3

He creado una directiva llamada repeatInside para resolver problemas como éste.

<dl repeat-inside="word in dictionary"> 
    <dt>{{word.name}}</dt> 
    <dd>{{word.definition}}</dd> 
</dl> 

Answer 4

Esta respuesta no parece funcionar para mí en v1.2.7 angular, así que quería publicar una ligera variación que funcionó bien para mí:

<dl> 
    <dt ng-repeat-start="(key, value) in items">{{key}}</dt> 
    <dd ng-repeat-end>{{value}}</dd> 
</dl>