ネストされたAngularJS ng-repeatを使用してブートストラップの折りたたみを正しく行うにはどうすればよいですか？

Question

崩壊トグルアイコンをクリックすると、によって生成された最初のliの場合にのみ機能しますが、これを修正して親を倒すことはできますか？li？

$scope.data = [{ 
 
    label: 'North America', 
 
    children: [{ 
 
    label: 'Canada', 
 
    children: ['Toronto', 'Vancouver'] 
 
    }, { 
 
    label: 'USA', 
 
    children: ['New York', 'Los Angeles'] 
 
    }, { 
 
    label: 'Mexico', 
 
    children: ['Mexico City', 'Guadalajara'] 
 
    }] 
 
}, { 
 
    label: 'South America', 
 
    children: [{ 
 
    label: 'Venezuela', 
 
    children: ['Caracas', 'Maracaibo'] 
 
    }, { 
 
    label: 'Brazil', 
 
    children: ['Sao Paulo', 'Rio de Janeiro'] 
 
    }, { 
 
    label: 'Argentina', 
 
    children: ['Buenos Aires', 'Cordoba'] 
 
    }] 
 
}];

<ul class="list-group"> 
 
    <li class="list-group-item" ng-repeat="item in data"> 
 
    <ul class="collapse in" ng-if="item.children" id="collapse"> 
 
     <i class="glyphicon glyphicon-minus pull-right" data-toggle="collapse" data-target="#collapse"></i> 
 
     <i class="glyphicon glyphicon-plus pull-right hidden"></i> 
 
     {{item.label}} 
 
     <li class="list-group-item" ng-repeat="sub in item.children"> 
 
     {{sub.label}} 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

あなたが固有のIDをターゲットにしていることを確認するために$indexを使用してください。インナー<ul>タグに

• 、最初<i>タグにid="collapse{{ $index }}"
• 、data-target="#collapse{{ $index }}"

HTML：：

<ul class="list-group"> 
    <li class="list-group-item" ng-repeat="item in data"> 
    <ul class="collapse in" ng-if="item.children" id="collapse{{ $index }}"> 
     <i class="glyphicon glyphicon-minus pull-right" data-toggle="collapse" data-target="#collapse{{ $index }}"></i> 
     <i class="glyphicon glyphicon-plus pull-right hidden"></i> 
     {{item.label}} 
     <li class="list-group-item" ng-repeat="sub in item.children"> 
     {{sub.label}} 
     </li> 
    </ul> 
    </li> 
</ul> 

Sample Plunk

したがって、次の2つのあなたのコードに変更を加えます