Comment pourrais-je rendre une liste de définition dynamique en utilisant angular?

Question

Comment pourrais-je rendre une liste de définition dynamique en utilisant angular?

Exemple:

Les données:

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

HTML désiré:

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

L'exemple sur http://docs.angularjs.org/tutorial/step_08 :

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

fonctionne pour un nombre dynamique de dds et un nombre statique de dts, mais pas un nombre dynamique des deux.

Answer 1

Une nouvelle fonctionnalité qui permet ng-repeat-start / ng-repeat-end a été ajoutée dans Angular 1.2.

Avec cette fonctionnalité, vous pouvez écrire votre code HTML comme ceci:

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

Voir ce plnkr pour un exemple de travail complet.

Answer 2

J'ai créé une directive appelée repeatInside pour résoudre des problèmes comme celui-ci.

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

Answer 3

C'est un problème, car vous devez l'envelopper avec un élément pour pouvoir le répéter. Et ce ne sera pas un code HTML valide - vous auriez le même problème avec des listes ou des tableaux non ordonnés ...

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

Je suppose que div intérieur de dl n'est pas autorisé par la spécification, mais cela fonctionne - du moins dans Chrome :-D

Nous prévoyons de prendre en charge ng-repeat dans un commentaire.

Answer 4

Cette réponse ne semblait pas fonctionner pour moi dans Angular v1.2.7, donc je voulais publier une légère variation qui fonctionnait bien pour moi:

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