web-dev-qa-db-fra.com

Comment afficher une liste de définition dynamique à l'aide d'AngularJS?

Comment afficher une liste de définition dynamique à l'aide d'AngularJS?

Exemple:

Les données:

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

HTML souhaité:

<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.

angularjs
71
Max Nanasy

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 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.

100
Aleksander Blomskøld

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>
9
bigblind

C'est un problème, car vous devez l'envelopper avec un élément afin de le répéter. Et ce ne sera pas un 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 le div à l'intérieur dl n'est pas autorisé par les spécifications, mais cela fonctionne - au moins dans Chrome :-D

Nous prévoyons de soutenir ng-repeat à l'intérieur d'un commentaire pour soutenir cela.

7
Vojta

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>
3
chrisjordanme