使用$index设置动态id

Question

我有这个代码：

我的列表，它应该像具有主导航点和子导航点的导航一样工作：

list = [
    {
        Id: 1,
        Name: 'Main 1',
        Items: [
            {
                Id: 1,
                Name: 'Sub 1'
            },
            {
                Id: 2,
                Name: 'Sub 2'
            }
        ]
    },
    {
        Id: 2,
        Name: 'Main 2',
        Items: [
            {
                Id: 1,
                Name: 'Sub 1'
            },
            {
                Id: 2,
                Name: 'Sub 2'
            }
        ]
    }
];

这是我的 HTML。我使用 ng-repeat 循环要点及其子点，并尝试使用

$index

.:

动态设置一些 id

<div class="wrapper" ng-repeat="item in list">
    <div id="main_{{$index}}">{{item.Name}}</div>
    <div id="main_{{$parent.$index}}_sub_{{$index}}" ng-repeat="sub in item.Items">
        <div>&mdash; {{sub.Name}}</div>
    </div>
</div>

我的结果是这样的，而且效果很好：

Main 1
- Sub 1
- Sub 2
Main 2
- Sub 1
- Sub 2

我现在的目标是将

id

分配给我的

div

与主设备，我的

div

与副设备。我将当前索引与

$index

添加到主

div

中的 id 中，之后我尝试将子 div 的 id 与主索引（它的父级）和当前索引相结合。为了获取父级的索引，我使用了

$parent.$index

。我的预期结果是遵循 id：

Main 1 -> id = main_0
- Sub 1 -> id = main_0_sub_0
- Sub 2 -> id = main_0_sub_1
Main 2 -> id = main_1
- Sub 1 -> id = main_1_sub_0
- Sub 2 -> id = main_1_sub_1

但这目前不起作用。主 div 的 id 是正确的，但子 div 的 id 不正确。我认为 $parent.$index 应该可以工作，但是 main 的当前索引有问题。我不知道如何解决这个问题。我希望有人能帮助我。

Answer 1

尝试下面的代码片段，它在这里工作正常！

var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
  
$scope.list = [
    {
        Id: 1,
        Name: 'Main 1',
        Items: [
            {
                Id: 1,
                Name: 'Sub 1'
            },
            {
                Id: 2,
                Name: 'Sub 2'
            }
        ]
    },
    {
        Id: 2,
        Name: 'Main 2',
        Items: [
            {
                Id: 1,
                Name: 'Sub 1'
            },
            {
                Id: 2,
                Name: 'Sub 2'
            }
        ]
    }
];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<div class="wrapper" ng-repeat="item in list">
    <div id="main_{{$index}}">{{item.Name}} - main_{{$index}}</div>
    <div id="main_{{$parent.$index}}_sub_{{$index}}" ng-repeat="sub in item.Items">
        <div>&mdash; {{sub.Name}} - main_{{$parent.$index}}_sub_{{$index}}</div>
    </div>
</div>
</div>

Answer 2

我注意到你想要的是 $index-1。试试这个：

<div class="wrapper" ng-repeat="item in list">
    <div id="main_{{$index-1}}">{{item.Name}}</div>
    <div id="main_{{$parent.$index-1}}_sub_{{$index-1}}" ng-repeat="sub in item.Items>
        <div>&mdash; {{sub.Name}}</div>
    </div>
</div>