Как реализовать «то, что видно справа = видно слева»?

#angularjs

#angularjs

Вопрос:

Как реализовать следующее?: например, с левой стороны у меня есть список элементов, и это подпункты, и это подраздел Items…no конец Когда я нажимаю значок показать / скрыть, подпункты отображаются / скрываются.(например, развернуть / свернуть). здесь изображение:

введите описание изображения здесь

с правой стороны я перечисляю одни и те же элементы и подпункты со всеми подуровнями. Но мне нужна следующая функциональность: когда я открываю 1 уровень с левой стороны, также один уровень отображается с правой стороны. при открытии 3 уровней с левой стороны, 3 уровня отображаются с правой стороны. как это реализовать? может быть, передать переменные для всех уровней?? или одна переменная, где устанавливать уровни?

реализован список элементов и подпунктов с левой стороны:

          <div class="hoverFolder drag btn ">
            <div layout="row" layout-align="end end"  flex="10" ng-click="vm.setCurrent(iter.id);vm.shouldShowChildren[$index]=!vm.shouldShowChildren[$index]; vm.viewSubItemOnRight(vm.shouldShowChildren[$index]);">
                <div>
                    <md-icon style="font-size:20px;" md-font-icon="zmdi zmdi-chevron-right"  ng-class="{ open: vm.shouldShowChildren[$index] }"></md-icon>
                </div>
            </div>
        </div>
        <div ng-show="vm.shouldShowChildren[$index]"  class="collapseChildren" dragula="'folder-bag'">
            <div ng-repeat="child in items.children track by $index"  ng-include="'app/components/work/leftsidenav-work/work-item-child.tmpl.html' "></div>
        </div>
 

Комментарии:

1. Как вы реализовали выпадающее меню? Используете ли вы Bootstrap или другие плагины?

2. обновленная информация. Никакой начальной загрузки.