Set dynamische ID mit $ index

Question

ich diesen Code haben:

Meine Liste, wich sollte mit Haupt nav Punkte und Unter nav Poins wie eine Navigation arbeiten:

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

Und das ist mein HTML . I Schleife die wichtigsten Poins und es ist Unterpunkte mit ng-repeat und versuchen, einige ids dynamicly mit dem $index einzustellen.

<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> 

Mein Ergebnis ist so etwas wie dieses und es funktioniert gut:

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

Mein Ziel ist es nun, einen id zu meinem div mit dem Haupt- und meinen div mit den Subs zuzuweisen. Ich füge den aktuellen Index mit $index zu meiner ID im Haupt div hinzu und danach versuche ich, die ID für die Unterdivs mit dem Index vom Haupt (es ist übergeordnetes) und vom gegenwärtigen Index zu kombinieren. Um den Index des Elterns zu erhalten, habe ich $parent.$index verwendet. Mein erwartetes Ergebnis sind folgende IDs:

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 

Aber das funktioniert im Moment nicht. Die IDs für das Haupt-Div sind korrekt, aber die ID für das Sub ist nicht korrekt. Ich dachte mit $ parent. $ Index sollte es funktionieren, aber es gibt ein Problem mit dem aktuellen Index der wichtigsten. Ich habe keine Ahnung, wie ich das lösen soll. Ich hoffe, dass mir jemand helfen kann.

Answer 1

Probieren Sie den folgenden Code-Ausschnitt, es funktioniert hier gut!

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

Ich bemerke, dass das, was Sie wollen, ist der $ index-1. Versuchen Sie folgendes:

<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>