CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-scopeangularjs-ng-repeat
BonJon
BonJon

Reputation: 799

How to get the index of an parent scope array/ng-repeat inside child ng-repeat

I am building a table and I have two ng-repeat for my table.

My question is if it's possible the child of the ng-repeat can get the parent ng-repeat's index. For example:

<tbody>
    <tr ng-repeat="company in companies">
        <td ng-repeat="product in company">
            company # = {{the company index}} and product {{$index}}
        </td>
    </tr>
</tbody>

I am not sure how to add the company index under the td ng-repeat. Is there a way to do this? Thanks a lot!

Upvotes: 0

Views: 733

Answers (3)

ryanyuyu
ryanyuyu

Reputation: 6486

Using $parent can get you the parent scope's original array. From there, the array indexOf() function will get you the index of the element with respect to its array. In your code it looks like this

<tr ng-repeat="company in companies">
    <td ng-repeat="product in company">
        company # = {{$parent.companies.indexOf(company)}} and product {{$index}}
    </td>
</tr>

Upvotes: 1

PSL
PSL

Reputation: 123739

This is exactly where ng-init comes into picture, to alias special properties of ng-repeat, ex: ng-init="companyIdx=$index". So each child scope created by company ng-repeat will have this companyIdx property.

<tbody>
    <tr ng-repeat="company in companies" ng-init="companyIdx=$index">
        <td ng-repeat="product in company">
            company # = {{companyIdx}} and product {{$index}}
        </td>
    </tr>
</tbody>

Using a $parent is fine but it you have any other directive that creates a child scope in between them, eg:- ng-if, another ng-repeat etc.. you will have to go crazy doing $parent.$parent..... Aliasing with ng-init makes it clean and more readable and maintainable as well.

Upvotes: 4

tymeJV
tymeJV

Reputation: 104775

Of course, use $parent

company # = {{$parent.$index}} and product {{$index}}

Upvotes: 2

Related Questions