嵌入式ng-repeats與bootstrap崩潰，$ index和ng-init出現問題

Question

我有一個帶有多次重復重復的自舉折疊手風琴：

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

這種情況越來越接近，但仍然沒有正常工作（第一個省開放，其嵌套的部門和公社和第二個省開放，但不是它的嵌套部門和公社）。 如何讓所有面板獨立打開？

我希望這是有道理的 - 如果不是，我會做一個能夠展示的人。

Answer 1

我找到了解決方案：

<div class="subdiv-wrapper">
    <div class="panel-group" id="accordion1_{{subdivIndex}}" ng-repeat="admin in subdivisions" ng-init="subdivIndex = $index">
        <div class="panel panel-default" id="accordion1_{{subdivIndex}}" ng-repeat="admin2 in admin.province">

            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="accordion1_{{subdivIndex}}" href="#collapse-1{{subdivIndex}}" aria-expanded="false" class="collapsed"><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_{{subdivIndex}}_{{subdivIndex2}}">

                        <!-- 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_{{subdivIndex}}_{{subdivIndex2}}" href="#collapse-1-1_{{subdivIndex}}_{{subdivIndex2}}"><span class="span-left">{{ admin3.name }}</span><span class="span-right">{{ admin3.population }}</span></a> 
                                </h4>
                            </div>
                            <!-- communes -->                           
                            <div id="collapse-1-1_{{subdivIndex}}_{{subdivIndex2}}" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <!-- display 'communes' title here -->
                                    <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>
</div>

現在我只想弄清楚當另一個面板打開時如何關閉所有面板......