web-dev-qa-db-fra.com

ng-repeat: clé d'accès et valeur pour chaque objet dans un tableau d'objets

J'ai un tableau d'objets et j'utilise un ng-repeat pour les parcourir, ce qui est facile. Le tableau ressemble à ceci:

$scope.steps = [
    {companyName: true},
    {businessType: true},
    {physicalAddress: true}
];

Et mon attribut ng-repeat ressemble à ceci:

<div ng-repeat="step in steps"> ... </div>

À chaque itération, step est égal à l'un des objets, comme prévu. Est-il possible d'accéder à la clé et à la valeur de l'objet step? Pour que je puisse faire quelque chose comme ça:

<div ng-repeat="(stepName, isComplete) in steps"> ... </div>

Où stepName == 'companyName' et isComplete == true. J'ai essayé de faire exactement cela, mais stepName finit toujours par être l'index de l'objet step (ce qui a du sens). J'essaie simplement de savoir s'il existe un autre moyen d'écrire la syntaxe ng-repeat afin d'obtenir la clé et la valeur.

Merci pour toutes les idées/suggestions. Très appréciée.

PS Mon travail actuel consiste simplement à faire cela dans mon contrôleur:

$scope.stepNames = [];
angular.forEach($scope.steps, function(isComplete, stepName){
     $scope.stepNames.Push({stepName: stepName, isComplete: isComplete});
});

Et ensuite, iter sur cela, mais il serait bien de tout faire dans la vue

angularjsangularjs-ng-repeat
59
tennisgent

Un répéteur à l'intérieur d'un répéteur

<div ng-repeat="step in steps">
    <div ng-repeat="(key, value) in step">
        {{key}} : {{value}}
    </div>
</div>
105
tymeJV

En fait, vos données ne sont pas bien conçues. Vous feriez mieux d'utiliser quelque chose comme:

$scope.steps = [
    {stepName: "companyName", isComplete: true},
    {stepName: "businessType", isComplete: true},
    {stepName: "physicalAddress", isComplete: true}
];

Ensuite, il est facile de faire ce que vous voulez:

<div ng-repeat="step in steps">
 Step {{step.stepName}} status : {{step.isComplet}}
</div>

Exemple: http://jsfiddle.net/rX7ba/

16
GuillaumeA

Dans le cas où cela est une option pour vous, si vous mettez vos données sous forme d'objet, cela fonctionne comme je le pense que vous espérez:

$scope.steps = {
 companyName: true,
 businessType: true,
 physicalAddress: true
};

Voici un violon de ceci: http://jsfiddle.net/zMjVp/

7
KayakDave

Je pense que le problème vient de la façon dont vous avez conçu vos données. Pour moi, en termes de sémantique, cela n'a aucun sens. À quoi servent exactement les étapes?

Stocke-t-il les informations d'une entreprise?

Si tel est le cas, les étapes doivent être un objet (voir la réponse de KayakDave) et chaque "étape" doit être une propriété d'objet.

Stocke-t-il les informations de plusieurs entreprises?

Si tel est le cas, les étapes doivent consister en un tableau d'objets.

$scope.steps=[{companyName: true, businessType: true},{companyName: false}]

Dans les deux cas, vous pouvez facilement parcourir les données avec un (deux pour le 2e cas) ng-repeats.

3
NicolasMoise

Voici une autre façon, sans avoir besoin d'imbriquer les répéteurs.

De la documentation Angularjs :

Il est possible de demander à ngRepeat de parcourir les propriétés d'un objet à l'aide de la syntaxe suivante:

<div ng-repeat="(key, value) in steps"> {{key}} : {{value}} </div>
2
James Drinkard