ng-repeat and $index in outer and inner loop

Question

I have an array like this in my controller:

$scope.myArray = [
{
    id: 1,
    name: "my object",
    options: [
        {
          id: 1,
          key: "key1",
          value: "value1"
        },
        {
          id: 2,
          key: "key2",
          value: "value2"
        }
    ]
},
{
      id: 2,
    name: "my object 2",
    options: [
        {
          id: 1,
          key: "key3",
          value: "value3"
        },
        {
          id: 2,
          key: "key4",
          value: "value4"
        }
    ]
}
]

I want to loop through this in my template in angular. This is what I have so far:

<div ng-repeat="obj in myArray">
    <input ng-model="myArray[$index].name" />

    <div ng-repeat="option in obj.options">

        /*How can I use $index again here to loop through the options array ? Wouldn't $index be for the parent loop */
        <input ng-model="obj.options[$index].value" />
    </div>
</div>

My question is that in the above inner loop where I am trying to use obj.options[$index], will this refer to the correct index of the options array or will it still think that it is using the index of the parent array ?

You are doing it wrong, use the solution provided by @MichaelFalckWedelgård — Diana R
– Diana R, Commented Oct 13, 2015 at 14:19

PSK · Accepted Answer · 2015-10-13 14:16:31Z

6

$index will always give you current ng-repeat index. To get the parent ng-repeat index use $parent.$index

answered Oct 13, 2015 at 14:16

PSK

18k5 gold badges35 silver badges44 bronze badges

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

1 Comment

codegeek Over a year ago

Thx. Exactly what I needed.

Michael Falck Wedelgård · Accepted Answer · 2015-10-13 14:16:14Z

2

Try this:

<div ng-repeat="obj in myArray">
    <input ng-model="obj.name" />

    <div ng-repeat="option in obj.options">

        <input ng-model="option" />
    </div>
</div>

In Angular when you use ng-repeat "obj in myArray" it states that "obj" is an alias for the current item being iterated over in the array.

answered Oct 13, 2015 at 14:16

Michael Falck Wedelgård

3,2232 gold badges34 silver badges41 bronze badges

3 Comments

codegeek Over a year ago

I understand your answer. But I am interested in using the $index since I want to use the 2 way data binding by saving the values in scope exactly so that I can send them to server to edit. If I just do ng-model = option, it won't work when I want to resend the entire array to server to save if an edit was made. Hope this explains.

hic1086 Over a year ago

I think it will work too.beause option.value is binded to obj.options[$index] .value and object.name is binded to myArray[$index].name. ($index is always the one of the current scope)

Diana R Over a year ago

@codegeek this solution will work with bi-directional binding 100%.

hic1086 · Accepted Answer · 2015-10-13 14:26:16Z

2

try this of you want to get the indexes from both ng-repeat:

<div ng-repeat="(indexParent, obj) in myArray">
   <input ng-model="myArray[indexParent].name" />
     <div ng-repeat="(index,option) in obj.options">
    <input ng-model="myArray[indexParent].options[index].value" />
</div>

edited Oct 13, 2015 at 14:26

answered Oct 13, 2015 at 14:20

hic1086

7553 silver badges10 bronze badges

Collectives™ on Stack Overflow

ng-repeat and $index in outer and inner loop

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related