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    lt div ng-repeat  step in steps  gt       lt  div gt    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    lt div ng-repeat   stepName  isComplete  in steps  gt       lt  div gt    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

User · Answer

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.

User · Answer

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     lt div ng-repeat  step in steps  gt   Step   step stepName   status     step isComplet    lt  div gt    Example  http   jsfiddle net rX7ba

User · Answer

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

User · Answer

A repeater inside a repeater   lt div ng-repeat  step in steps  gt       lt div ng-repeat   key  value  in step  gt            key       value        lt  div gt   lt  div gt

User · Answer

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

User · Answer

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     lt div ng-repeat   key  value  in steps  gt    key       value    lt  div gt

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

Examples related to angularjs

Examples related to angularjs-ng-repeat