У меня есть загрузочный аккордеон с несколькими повторениями ng:
<div class="subdiv-wrapper">
<div class="panel-group" id="accordion1" ng-repeat="admin in subdivisions" ng-init="subdivIndex = $index">
<div class="panel panel-default" ng-repeat="admin2 in admin.province">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapse-1{{subdivIndex}}"><span class="span-left">{{ admin2.name }}</span><span class="span-right">{{ admin2.population }}</span></a>
</h4>
</div>
<div id="collapse-1{{subdivIndex}}" class="panel-collapse collapse">
<div class="panel-body">
<h3>districts</h3>
<div class="panel-group" id="accordion2">
<!-- districts -->
<div class="panel panel-default" ng-repeat="admin3 in admin.district" ng-init="subdivIndex2 = $index">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse-1-1{{subdivIndex2}}"><span class="span-left">{{ admin3.name }}</span><span class="span-right">{{ admin3.population }}</span></a>
</h4>
</div>
<!-- communes -->
<div id="collapse-1-1{{subdivIndex2}}" class="panel-collapse collapse">
<div class="panel-body">
<div ng-repeat="admin4 in admin3.commune"><span class="span-left">{{ admin4.name }}</span><span class="span-right">{{ admin4.population }}</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
В моем угловом контроллере есть вложенный массив:
$scope.subdivisions = [
//start province: adrar
{ "province": [{"name":"Adrar","population":"123"}], "district": [
// district: adrar
{ "name":"Adrar","population":"123","commune":[
{"name":"Adrar","population":"123"},
{"name":"Bouda","population":"123"},
{"name":"Ouled Ahmed Timmi","population":"123"}
]},
// district: aoulef
{ "name":"Aoulef","population":"123","commune":[
{"name":"Akabli","population":"123"},
{"name":"Aoulef","population":"123"},
{"name":"Timokten","population":"123"},
]},
// district: aougrout
{ "name":"Aougrout","population":"123","commune":[
{"name":"Aougrout","population":"123"},
{"name":"Deldoul","population":"123"},
{"name":"Metarfa","population":"123"}
]},
]}, //end province: adrar
//start province: algiers
{ "province": [{"name":"Algiers","population":"123"}], "district": [
// district: bab el oued
{ "name":"Bab El Oued","population":"123","commune":[
{"name":"Bab El Oued","population":"123"},
{"name":"Casbah","population":"123"},
{"name":"Bains Romains","population":"123"}
]},
// district: baraki
{ "name":"Baraki","population":"123","commune":[
{"name":"Baraki","population":"123"},
{"name":"Les Eucalyptus","population":"123"},
{"name":"Sidi Moussa","population":"123"}
]},
// district: Bir Mourad Raïs
{ "name":"Bir Mourad Raïs","population":"123","commune":[
{"name":"Bir Mourad Raïs","population":"123"},
{"name":"Hydra","population":"123"},
{"name":"Saoula","population":"123"}
]},
]}, //end province: algiers
]; // end subdivisions
У моего аккордеона есть каждая провинция, затем каждая из дивизий этой провинции, а затем каждая из коммун отдельных дивизий.
Я пытаюсь заставить каждую складную панель правильно открываться и закрываться. Поэтому я попытался добавить $index (и $parent.$index к вложенному ng-repeat), но это не сработало.
Затем я добавил 2 ng-init:
- Первый -
ng-init="subdivIndex = $index"
- Второй -
ng-init="subdivIndex2 = $index"
Это приближается, но все еще не работает должным образом (открывается первая провинция и ее вложенные подразделения и коммуны, а вторая провинция открывается, но не ее вложенные подразделения и коммуны). Как я могу заставить все панели открываться независимо?
Надеюсь, это имеет смысл - если нет, я сделаю поршень для демонстрации.