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/

Answer 3

In case this is an option for you, if you put your data into object form it works the way I think you're hoping for:

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

Here's a fiddle of this: http://jsfiddle.net/zMjVp/

Answer 4

I think the problem is with the way you designed your data. To me in terms of semantics, it just doesn't make sense. What exactly is steps for?

Does it store the information of one company?

If that's the case steps should be an object (see KayakDave's answer) and each "step" should be an object property.

Does it store the information of multiple companies?

If that's the case, steps should be an array of objects.

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

In either case you can easily iterate through the data with one (two for 2nd case) ng-repeats.

Answer 5

Here is another way, without the need for nesting the repeaters.

From the Angularjs docs:

It is possible to get ngRepeat to iterate over the properties of an object using the following syntax:

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

Answer 6

seems like in Angular 1.3.12 you do not need the inner ng-repeat anymore, the outer loop returns the values of the collection is a single map entry