使用$ index设置动态ID

时间:2016-10-27 12:08:30

标签: html angularjs indexing parent

我有这段代码:

我的列表,应该像导航主导航点和子导航点一样工作:

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循环主要的poins和它的子点,并尝试使用$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的当前索引添加到主$parent.$index中的id中,之后我尝试将子div的id与main(它的父)的索引和当前索引组合在一起。为了获得父代的索引,我使用了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 。我的预期结果是跟随id:

caffe collect2: error: ld returned 1 exit status

但目前这不起作用。主div的id是正确的,但sub的id不是。我认为使用$ parent。$ index它应该可以工作,但主要的当前索引存在问题。我不知道如何解决这个问题。我希望有人可以帮助我。

2 个答案:

答案 0 :(得分:2)

请尝试以下代码段,它在这里工作正常!

&#13;
&#13;
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'
            }
        ]
    }
];

});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我注意到你想要的是$ 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>