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的角度来看，您的方法是否理想。您的最终用户是否清楚他们可以点击打开的用户才能关闭？如果不清楚，可以考虑使用＆＃34; +＆＃34;所有非活动标题左侧的图标，并且有一个＆＃34; - ＆＃34;显示在活动的旁边（如果使用glyphicons则使用ng-class，如果您只是使用文本或图形，则使用ng-show和ng-hide）。

这样，当用户点击打开某个部分时，＆＃34; +＆＃34;变成＆＃34; - ＆＃34;当它打开时，用户意识到他们可以再次点击标题来关闭它。

angular ng-repeat切换菜单元素

2 个答案: