带有引导崩溃的嵌套 ng-repeats，$index 和 ng-init 的问题

Question

我有一个带有多个 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"

这越来越接近，但仍然无法正常工作（第一个省份打开，其嵌套的分区和公社，第二个省份打开，但没有嵌套的分区和公社）。如何让所有面板独立打开？

我希望这是有道理的 - 如果没有，我会做一个笨拙的人来演示。

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>

现在我只是想弄清楚如何在打开另一个面板时关闭所有面板...