Comment puis-je rendre une liste de définitions dynamics en utilisant AngularJS?
Exemple:
Les données:
[ { key: 'a', value: 'x' }, { key: 'b', value: 'y' } ]
HTML souhaité:
- a
- x
- b
- y
L’exemple à http://docs.angularjs.org/tutorial/step_08 :
- Availability
- {{availability}}
fonctionne pour un nombre dynamic de dds et un nombre statique de dts, mais pas un nombre dynamic des deux.
Une nouvelle fonctionnalité autorisant 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:
- {{i.key}}
- {{i.value}}
Voir ce plnkr pour un exemple de travail complet.
J’ai créé une directive appelée repeatInside pour résoudre des problèmes comme celui-ci.
- {{word.name}}
- {{word.definition}}
Ceci est un problème, car vous devez l’emballer avec un élément pour pouvoir le répéter. Et ce ne sera pas un code HTML valide – vous rencontrerez les mêmes problèmes avec des listes ou des tableaux non ordonnés …
- {{i.key}}
- {{i.value}}
Je suppose que la div
dans dl
n’est pas autorisée par spec, mais ça marche – au moins dans Chrome 😀
Nous prévoyons de prendre en charge ng-repeat
dans un commentaire pour le supporter.
Cette réponse ne semblait pas fonctionner pour moi dans Angular v1.2.7, alors je voulais afficher une légère variation qui a bien fonctionné pour moi:
- {{key}}
- {{value}}