angularjs - ng-repeat works with $index only

Question

I am new to AngularJS and I have to say I am finding it exceedingly difficult and fiddly.

I have a json response from a webserver. Typical array of dictionaries. I want to display the name key for each dictionary in the values array. This works:

<ul>
  <li ng-model="projects" ng-repeat="values in projects">
    project name:{{projects.values[$index].name}}
  </li>
</ul>

This does NOT work, but I don't understand why it doesn't:

<ul>
  <li ng-model="projects" ng-repeat="values in projects">
    project name:{{values.name}}
  </li>
</ul>

Plain old {{name}} doesn't work either. None of the examples I've found resort to calling out the array index explicitly with $index, so I must be doing something wrong. Please enlighten me!

$index is the index of the <li> list item, which (especially if you apply a filter) will not always correspond to the index of the object you are iterating, — SoluableNonagon
– SoluableNonagon, Commented Mar 20, 2014 at 19:10

Jake Johnson · Accepted Answer · 2014-03-21 12:42:30Z

3

you don't need ng-model on your list anywhere.

here is a working example of what you're trying to do:

http://jsfiddle.net/8r2zA/1/

and as the others said, if you need access to the index in your iteration you can do:

<ul>
  <li ng-repeat="(index, values) in projects">
    {{projects[index].name}}
  </li>
</ul>

edited Mar 21, 2014 at 12:42

answered Mar 20, 2014 at 19:32

Jake Johnson

1,8541 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jsd Over a year ago

Your answer got me the closest: <ul ng-repeat="values in projects.values"> <li>{{values.name}}</li> </ul> Seems weird that you have to repeat values like that. I thought there was some sort of implicit dictionary being passed to the brackets.

Jake Johnson Over a year ago

think of it as a forEach loop. You're basically saying "repeat each VALUE IN the PROJECTS.VALUES array", so although it doesn't actually matter what you call it; it would make more sense for you to call it value (not values). e.g. ng-repeat="value in projects.values". You could call it bacon in projects.values if you wanted to and reference everything in that array using {{bacon.whateverProperty}}

jsd Over a year ago

i'm totally going to call it bacon from now on.

Ruslan Ismagilov · Accepted Answer · 2014-03-20 19:06:46Z

-1

It would be good, to see yours projects structure.
But, you could also try:

<li ng-repeat="(index, name) in projects">
  {{name[index]}}
</li>

answered Mar 20, 2014 at 19:06

Ruslan Ismagilov

1,3487 silver badges14 bronze badges

Collectives™ on Stack Overflow

angularjs - ng-repeat works with $index only

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related