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]: http://stackoverflow.com/questions/15256600/passing-2-index-values-within-nested-ng-repeat — Manube, Feb 08 '15 at 00:18

PSL · Accepted Answer · 2015-02-08T00:23:10.807

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.

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! — Ka Tech, Feb 08 '15 at 01:15

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

1 Answers1