angular to-repeat切换菜单元素

Question

我的菜单里面装满了$ http方法

<ul class="nav">
    <li ng-repeat="(itemIndex, item) in menuItems.menu_items">
        <a ng-click="showSubmenu(itemIndex)" ng-href="{{item.link}}">{{item.title}}</a>
        <ul class="sub-nav" ng-show="isShowing(itemIndex)">
            <li ng-repeat="subItem in item.submenu">
                <a ng-href="{{subItem.link}}">{{subItem.title}}</a>
                <span>{{subItem.desc}}</span>
            </li>
        </ul>
    </li>
</ul>

在控制器中

$scope.activeMenuIndex;
$scope.showSubmenu = function(item) {
    $scope.activeParentIndex = item;
}

$scope.isShowing = function(index) {
    return $scope.activeParentIndex === index;
};

基本上它可以工作 - 点击菜单元素隐藏其他元素并展开点击的元素。问题是当我点击打开的菜单元素时 - 它不会隐藏。

也许你比我的（不完整）方式更了解解决方案？

问候！

Answer 1

你需要添加这样的条件：

$scope.showSubmenu = function(item) {
    if($scope.activeParentIndex === item){
        $scope.activeParentIndex = "";
    }else{
        $scope.activeParentIndex = item;
    }
}

Answer 2

正如@fliborn所说，你可以把这个逻辑放在showMenu中。或者，为清楚起见，请考虑将showMenu（id）重命名为toggleMenu（id） - 因此，如果您使用活动ID调用它，则会更清楚地处理结束情况。

但是，在任何一种情况下，你都会像@fliborn所说的那样，如果切换当前活动的id，则将activeParentIndex设置为null。

从Angular的角度来看，这当然是一种合理的方式（即，这是实现该行为的一种很好的技术方式，如果这是您想要的行为）。

另一件需要考虑的事情是，从UI的角度来看，您的方法是否理想。您的最终用户是否清楚他们可以点击打开的用户才能关闭？如果不清楚，请考虑在所有非活动标题的左侧放置一个“+”图标，并在活动标题旁边显示“ - ”（如果使用glyphicons则使用ng-class，如果使用ng-show和ng-hide，则使用ng-class）你只是要使用文字或图形）。

这样，当用户点击打开一个部分时，“+”会在打开时变成“ - ”，并且用户意识到他们可以再次点击标题来关闭它。