ng-repeat: access key and value for each object in array of objects

Question

I have an array of objects and I am using an ng-repeat to iterate over them, which is easy. The array looks something like this:

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

And my ng-repeat attribute looks like:

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

In each iteration, step is equal to one of the objects, as expected. Is there anyway to access both the key and the value of the step object? So that I could do something like this:

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

Where stepName == 'companyName' and isComplete == true. I've tried doing this exact thing but stepName always just ends up being the index of the step object (which makes sense). I'm just trying to figure out if there is another way to write the ng-repeat syntax so that I can get the key and the value.

Thanks for any ideas/suggestions. Much appreciated.

PS. My current work around is to just do this in my controller:

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

And then to iterate over that, but it would be nice to do it all in the view

Answer 1

A repeater inside a repeater

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

Answer 2

In fact, your data is not well design. You'd better use something like :

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

Then it is easy to do what you want :

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

Example: http://jsfiddle.net/rX7ba/