Come eseguo il rendering di un elenco di definizioni dinamiche utilizzando AngularJS?

Question

Come eseguire il rendering di un elenco di definizioni dinamiche utilizzando AngularJS?

Esempio:

dati:

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

HTML desiderata:

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

L'esempio a http://docs.angularjs.org/tutorial/step_08:

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

lavori per una serie dinamica di DDS e un statico mber di dts, ma non un numero dinamico di entrambi.

Answer 1

Una nuova funzione che consente ng-repeat-start/ng-repeat-end è stata aggiunta in Angular 1.2.

Con questa funzione, è possibile scrivere il codice HTML in questo modo:

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

Vedi this plnkr per un esempio di lavoro completo.

Answer 2

Questo è un problema, perché è necessario avvolgerlo con qualche elemento per poterlo ripetere. E non sta andando essere una valida html - si otterrebbe nella stessa difficoltà con le liste non ordinate o tabelle ...

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

Credo che la div all'interno dl non è consentito dalla spec, ma funziona - almeno in Chrome :-D

Abbiamo intenzione di supportare ng-repeat all'interno di un commento per supportare questo.

Answer 3

Ho creato una direttiva chiamata repeatInside per risolvere problemi come questo.

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

Answer 4

Questa risposta non sembra funzionare per me in v1.2.7 angolare così ho voluto pubblicare una leggera variazione che ha funzionato bene per me:

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