AngularJS - Comment puis-je référencer le nom de la propriété dans un ng-Repeat


134

En plus de rendre la valeur des propriétés dans un objet, j'aimerais également rendre le nom de la propriété sous forme d'étiquette. Y a-t-il un moyen de faire cela avec ng-repeat? Par exemple:

<ul>
    <li ng-repeat="option in data">{{propertyName}}: {{option}}</li>
</ul>

Ce qui pourrait cracher quelque chose comme ça:

<ul>
    <li>Name: John</li>
    <li>Phone: (123) 456-7890</li>
    <li>Country: England</li>
</ul>

Réponses:


337

Essaye ça:

<ul>
    <li ng-repeat="(key,val) in data">{{key}}: {{val}}</li>
</ul>

30
@Andy - ils ne sont pas si géniaux, en fait. Ils ont besoin d'exemples de code réels plus simples comme vous l'avez montré ici. Merci pour votre réponse et continuez à publier sur StackOverflow; votre message m'a vraiment aidé à comprendre comment accéder à la documentation AngularJS. Meilleures salutations et vote favorable!
noogrub

si facile mais n'y ai pas pensé: D tnx!
Guntram

que faire si j'ai une fonction comme --- myFunc (key) --- qui a besoin de la valeur de clé ce gonne montre-moi la clé de nom en html et non la valeur
Nejmeddine Jammeli

28

Le problème avec la documentation est qu'elle dit (key, value)avec cet espace ... il m'a fallu un certain temps pour comprendre qu'à cause de cela cela ne fonctionne pas


1
Merci beaucoup. Vous avez raison. Vous ne pouvez pas avoir d'espace entre la virgule et la valeur. (clé, valeur) non (clé, valeur).
Chad DeShon

9
Peut-être que les choses sont différentes dans les nouvelles versions d'Angular, mais vous pouvez avoir un espace entre les deux (key, val). C'est souvent comme ça que je fais.
EnigmaRM

J'ai trouvé (clé, valeur) ne fonctionnait pas pour moi. Êtes-vous en train de dire que c'est à cause des espaces ??? Bon sang! Mais merci.
code-sushi

2
Fonctionne aussi pour moi avec l'espace.
Shawn Lauzon

val vs valeur affectant l'espace?
Danny Mahoney
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.