我如何使Bootstrap崩潰與嵌套的AngularJS NG重複正常工作？

Question

當我點擊任何摺疊切換圖標，它只適用於ng-repeat生成的第一個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

使用$index，以確保您的目標唯一的ID。因此，請在以下2名更改您的代碼：

• 在內部<ul>標籤，id="collapse{{ $index }}"
• 在第一<i>標籤，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