AngularJS - original index of an object within filtered ng-repeat

Question

I am using a nested ng-repeat and a filter on a object. The first ng-repeat is filters to the headerId in a gapHeader object. The second ng-repeat filters gapSection, sectionId to the corresponding headerID.

I have an edit page which is within a separate modal window. The purpose is to edit content corresponding to the headerID & sectionID of the sub-object) This also has a separate control. Data is shared through a service.

My problem I have a button for each gapSection sub-object, which opens the edit page modal, when I pass the $index value for the current section within each section to the service, I get the $index only corresponding to the second ng-repeat? For example, if I click the button within the 2 ng-repeat on gapSection (headerId:2, sectionId:2), I get an $index of 1. I require an $index of 2 which corresponds the sub-object position within gapSection.

Is it possible to pass the true $index which corresponds to the $index defined in the original un-filtered object of gapSection? Appreciate any comments on this and thank you!

Object:

var data ={
gapHeader:[{headerId:1,name:"General Requiremets",isApplicable:true},
                    {headerId:2,name:"Insurance",isApplicable:false}],


gapSection:[{headerId:1,sectionId:1,requirement:"A facility is required to have company structure",finding:null,cmeasures:null,cprocedures:null,personResp:null,isAction:null},
        {headerId:2,sectionId:1,requirement:"Organisation must have public liablity",finding:null,cmeasures:null,cprocedures:null,personResp:null,isAction:null},
        {headerId:2,sectionId:2,requirement:"Facility must hold workers compensation insurance",finding:null,cmeasures:null,cprocedures:null,personResp:null,isAction:null}]



};

this looks similar to the following: [nested ng-repeat and $index issue][1] [1]: stackoverflow.com/questions/15256600/… — Manube
– Manube, Commented Feb 8, 2015 at 0:18

PSL · Accepted Answer · 2015-02-08 00:23:10Z

16

If you need the true index you do not even need to pass the $index property, just pass the object and get the index from the original list.

i.e

$scope.gapSectionFn = function(obj){
    var idx = data.gapSection.indexOf(obj);
}

Also it is not clear your issue could really be a nested ng-repeat issue, because according to you gapSection is the inner ng-repeat and you are invoking the call from inner ng-repeat and in need of gapSection's index. It should just be available, but the presence of a DOM filter will just reorg the items and its index which you can also get by doing an ng-init, i.e on the view ng-init="actIndex=$index" and use actIndex.

If you are trying to access parent ng-repeat's index then, ng-init is more appropriate than $parent.$index. Since ng-init is specially designed for that., on the parent ng-repeat you would write ng-init=""parentIndex=$index" and use parentIndex.

edited Feb 8, 2015 at 0:23

answered Feb 8, 2015 at 0:18

PSL

124k21 gold badges257 silver badges243 bronze badges

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

1 Comment

Ka Tech Over a year ago

indexOf(obj) works perfectly, thank you! You are right about the ng-repeat, truly the first ng-repeat works on a different object, hence why $parent.$index which I did initially try does not work, as I get the index of the gapHeader not the GapSection. Thanks again, thought this was going to be alot harder than thought!

Collectives™ on Stack Overflow

AngularJS - original index of an object within filtered ng-repeat

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related