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

Question

我想要实现的是使用 angular 和 ng-repeat 或 ng-option 创建一个深度为 3 的级别，但我失去了 $index 的轨迹，因为第二个和第三个级别从级别指向相同的 $index 1不是自己的水平。访问正确的索引很重要。

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

使用ng-init directive 保存索引：

还要确保嵌套的ng-repeat 使用之前的ng-repeat 变量：

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

演示

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

您可以使用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>