How to access index in a component called in ng-repeat in angularjs?

Question

I have the following files. This is code in node-list.html

<tbody sv-node-list-item ng-repeat="item in items" />

And this is code in node-list-item.html.

<tr><td>{{$index}}</td></tr>

Basically node-list-item is rendered for each iteration of the ng-repeat of the node-list.html file. I need to access the index of the item from the parent i.e. node-list.html in node-list-item.html I have been researching this for quiet some time but am not able to do so. Please help. I am using angular1 i.e. angularjs. This is the directive code in node-list-item.js

function directive() { return { templateUrl: "partials/node-list-item.html" };}
module.directive("svNodeListItem",[ directive ]);

The node-list-item directive would need to accept the index as an attribute. Show the code for that directive — charlietfl
– charlietfl, Commented Sep 16, 2019 at 12:24
I added directive code if there is any more stuff that needs to be added please do tell. — rexroxm
– rexroxm, Commented Sep 17, 2019 at 6:50

rexroxm · Accepted Answer · 2019-09-18 09:05:19Z

1

Use this in the node-list.html:(You need to send index to the node-list-item directive)

<tbody ng-repeat="item in items track by $index" sv-node-list-item index="{{$index}}"/>

Then change your sv-node-list-item directive to this:

function directive() { 
    return { 
        scope: {
           index: '@'
        },
        templateUrl: "partials/node-list-item.html" 
    };
}
module.directive("svNodeListItem",[ directive ]);

And finally your node-list-item.html to this:

<tr><td>{{index}}</td></tr>

For more information about ng-repeat check the documentation here and for directive variables here.

edited Sep 18, 2019 at 9:05

rexroxm

8781 gold badge10 silver badges28 bronze badges

answered Sep 16, 2019 at 9:22

Ricardo Rocha

16.5k24 gold badges86 silver badges142 bronze badges

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

6 Comments

rexroxm Over a year ago

trbody and tr are not part of the same file. I wouldn't have this problem if they were. I am using this node-list-item.html component at 5 or six other places where i need the same index from the parent that has ng-repeat. And node-list-item happens to be a 200 line code which i cannot put separately at all those places

Ricardo Rocha Over a year ago

@rexroxm the sv-node-list-item is a directive right? can you put your javascript code please?

rexroxm Over a year ago

yes it is a directive. it attaches node-list-item for each iteration.

Ricardo Rocha Over a year ago

@rexroxm ok. But can you add the code from the directive to the question so I could help you better?

rexroxm Over a year ago

I added directive code if there is any more stuff that needs to be added please do tell.

|

Collectives™ on Stack Overflow

How to access index in a component called in ng-repeat in angularjs?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related