如何使用angular和ng-repeat在javascript中创建3d dom？

Question

What I want to achieve is to create a 3 level in depth with angular and ng-repeat or ng-option but I am losing the track of $index because the second and third level are pointing to the same $index from level 1 not their own level. Accessing to the right index is important.

var A = [[[1],[2]],[[3],[4]],[[5],[6]]]

<ul> 
    <li ng-repeat="a in A track by indexA" ng-click="myFnA(indexA)">
        <ul> 
            <li ng-repeat="b in B track by indexB" ng-click="myFnB(indexB)"> 
                <ul> 
                    <li ng-repeat="c in C track by indexC" ng-click="myFnC(indexC)">

                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

Use the ng-init directive to save indexes:

Also be sure that the nested ng-repeat uses the previous ng-repeat variable:

ng-repeat="itemA in A"     ng-init="indexA=$index"
ng-repeat="itemB in itemA" ng-init="indexB=$index"
ng-repeat="c     in itemB"

The Demo

 angular.module("myApp",[]); angular.module("myApp").controller("myVm", function($scope) { $scope.A = [[[1],[2]],[[3],[4]],[[5],[6]]]; }); 

 <script src="//unpkg.com/angular/angular.js"></script> <div ng-app="myApp" ng-controller="myVm"> <h1>Nested ng-repeat Demo</h1> <ul> <li ng-repeat="itemA in A" ng-init="indexA=$index"> {{indexA}}:{{itemA}} <ul> <li ng-repeat="itemB in itemA" ng-init="indexB=$index"> {{indexB}}:{{itemB}} <ul> <li ng-repeat="c in itemB track by $index"> A[{{indexA}}][{{indexB}}][{{$index}}]={{c}} </li> </ul> </li> </ul> </li> </ul> </div> 

Answer 2

you can assign index to variable using ng-init

<ul> 
    <li ng-repeat="a in A track by $index" ng-init="indexA = $index"> <!--indexA is the index of a-->
        <ul> 
            <li ng-repeat="b in B track by $index"  ng-init="indexB = $index"><!--indexB is the index of b-->
                <ul> 
                    <li ng-repeat="c in C track by $index"  ng-init="indexC = $index"> <!--indexC is the index of c-->
                       {{indexA}}
                       {{indexB}}
                       {{indexC}}
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>