Как правильно организовать ng-show и ng-hide в Angular?

Question

[sanex3339]

Есть темплейт

<ul class="menu">
                    <li class="menuItem" ng-repeat="menuItem in menu">
                        <a href="{{ menuItem.route }}" ng-click="showSubmenu = !showSubmenu">{{ menuItem.text }}</a>
                        <ul class="subMenu" ng-show="showSubmenu">
                            <li class="subMenuItem" ng-repeat="subMenuItem in menuItem.subMenu">
                                <a href="{{ menuItem.route }}{{ subMenuItem.route }}">{{ subMenuItem.text }}</a>
                            </li>
                        </ul>
                    </li>
                </ul>

Меню с подменю - ul>li>ul>li

Проблема: при клике на 1 любой элемент основного меню - его подменю сворачивается/разворачивается, остальные подменю других элементов основного меню сохраняют свое текущее состояние развернут/свернут.

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

Пробовал выбрать все подменю через angular.element(document.querySelector('.subMenu')) - возвращает только подменю текущего элемента меню, я так понял из за отдельного scope'а?

Answer 1

[Alex]

showSubmenu сделай массивом и меняй у каждого элемента значение.
Тогда на onclick сможешь пробежаться по массиву и позакрывать лишние li

Что то типа showSubmenu[menuItem.id]

Comments

[sanex3339]

спасибо!