Question

我有一个带有多个ng-repeats的bootstrap折叠手风琴：

func tableView(_:, didSelectRowAt:)

我的角度控制器中有一个嵌套数组：

@objc

我的手风琴有一个省，然后是那个省的每个部门，然后是每个部门的公社。

我正在尝试使每个可折叠面板正确打开和关闭。因此，我尝试将<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">  <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>  <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）中，但这没有用。然后我添加了2 $parent.$index：

第一个-ng-repeat
第二个-ng-init

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

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

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>

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

具有引导程序崩溃的嵌套ng-repeats，$ index和ng-init有麻烦

1 个答案: