首页 文章

使用$ index设置动态ID

提问于
浏览 次
1

我有这个代码：

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

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 . 我用 $index 动态地循环主要的poins和's sub points with ng-repeat and try to set some 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

我的目标是现在为我的 div 分配一个 id 与我的 div 与sub . 我将 $index 的当前索引添加到主 div 中的id中，之后我尝试将sub div的id与main（它的父节点）和当前索引的索引结合起来 . 要获取父级索引，我使用了 $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是正确的，但sub的id不是 . 我认为使用$ parent . $ index它应该可以工作，但主要的当前索引存在问题 . 我不知道如何解决这个问题 . 我希望有一个人可以帮助我 .

html angularjs indexing parent

2 回答

  • 0

    试试下面的代码片段，它在这里运行正常！

    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>
    回复于
  • 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>
    回复于

相关问题