Развертывание и свертывание в теге UL

Question

У меня есть следующий HTML-код, в котором есть коллапс ( collapsebutton1 ) и кнопка расширения ( expandbutton1 ), которая свернет и развернет div networkDevicesCollapsePanel , это работает, как и ожидалось.

Теперь мне нужно привести коллапс и расширяться в каждом

Answer 1

Это может послужить идеей, попробуйте использовать угловой индекс $ для переключения стрелки и переключения div клиента.

И в угловом мы можем назначить каждому UL динамические классы, которые размещаются с помощью кнопки развернуть и свернуть

                           <div class="col-xs-4">
                                    <div class="panel" id="networkDevicesLinks">
                                        <div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
                                            <div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
                                            <div ng-show="ciAttributesCount" id="expandbutton1_{{$index}}" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
                                        </div>
                                        <div class="" >
                                            <ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
                                                <li>
                                                    <a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

Пересмотренный код ниже:

Я могу поставить кнопку свертывания при каждом повторении, но когда я нажимаю, она открывает всплывающее окно, а не сворачивается и разворачивается. Пожалуйста, посмотрите, где это не так

<div class="">

                        <ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">

                            <li>
 <div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse  no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
                                <a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a>
                                <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
                                <br />
                                <span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
                                <br />
                                <span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
                                <br />
                            </li>
                        </ul>
                    </div>