在使用 ngHide/ngShow 角度指令时一次打开一个下拉列表

Question

>我有一个简单的下拉菜单，我想稍微调整一下。我需要帮助对下拉列表进行动画处理，以便在打开时缩小。但这不是我最关心的问题。我真正需要帮助的是一次只打开一个下拉菜单。因此，如果我打开一个并且之前已经打开了另一个，它应该关闭。

我正在使用角度材料，所以我正在寻找一个角度控制器或指令解决方案，也许使用ngHide/ngShow指令？不确定那部分。

这是我的网页

    <md-list ng-click="menuIsOpen = !menuIsOpen" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
        <span class="title flex" flex=""> Menu Item</span>
        <i class="fa fa-chevron-down"></i>
    </md-list>
    <div class="sub-menu">
        <ul ng-init="menuIsOpen= false" ng-show="menuIsOpen">
            <md-menu-item ng-repeat="item in data">
                <md-button>
                    <div layout="row" flex="">
                        <a ui-sref="{{item.link}}">
                            <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                        </a>
                    </div>
                </md-button>
            </md-menu-item>
        </ul>
    </div>
    <md-list ng-click="menu2IsOpen = !menu2IsOpen" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
        <span class="title flex" flex=""> Menu Item 2</span>
        <i class="fa fa-chevron-down"></i>
    </md-list>
    <div class="sub-menu">
        <ul ng-init="menu2IsOpen= false" ng-show="menu2IsOpen">
            <md-menu-item ng-repeat="item in data">
                <md-button>
                    <div layout="row" flex="">
                        <a ui-sref="{{item.link}}">
                            <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                        </a>
                    </div>
                </md-button>
            </md-menu-item>
        </ul>
    </div>

我有一个代码笔，你可以结帐。多谢！

Answer 1

在ng-click中，将变量menuIsOpen设置为 ng-click="menuIsOpen = 1" 并作为ng-show="menuIsOpen === 1 "对其他菜单执行相同的操作。

例

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <button ng-click="menuIsOpen = 1">About Page</button>
  <button ng-click="menuIsOpen = 2">Help page</button>
  <button ng-click="menuIsOpen = 3">Info Page</button>
  <button ng-click="menuIsOpen = 4">Refrence page</button>
  <div class="form-group" ng-show="menuIsOpen===1">
    <p>About page</p>
  </div>
  <div class="form-group" ng-show="menuIsOpen===2">
    <p>Help page</p>
  </div>
  <div class="form-group" ng-show="menuIsOpen===3">
    <p>Info</p>
  </div>
  <div class="form-group" ng-show="menuIsOpen===4">
    <p>Refrence</p>
  </div>
</div>

  <div ng-controller="ListBottomSheetCtrl" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
        <div class="cnt">
            <md-list ng-click="menuIsOpen = 1" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
                <span class="title flex" flex=""> Menu Item</span>
                <i class="fa fa-chevron-down"></i>
            </md-list>
            <div class="sub-menu">
                <ul ng-init="menuIsOpen= false" ng-show="menuIsOpen === 1 ">
                    <md-menu-item ng-repeat="item in data">
                        <md-button>
                            <div layout="row" flex="">
                                <a ui-sref="{{item.link}}">
                                    <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                                </a>
                            </div>
                        </md-button>
                    </md-menu-item>
                </ul>
            </div>
            <md-list ng-click="menuIsOpen = 2" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
                <span class="title flex" flex=""> Menu Item 2</span>
                <i class="fa fa-chevron-down"></i>
            </md-list>
            <div class="sub-menu">
                <ul ng-init="menu2IsOpen= false" ng-show="menuIsOpen === 2 ">
                    <md-menu-item ng-repeat="item in data">
                        <md-button>
                            <div layout="row" flex="">
                                <a ui-sref="{{item.link}}">
                                    <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                                </a>
                            </div>
                        </md-button>
                    </md-menu-item>
                </ul>
            </div>
        </div>      
    </div>

Answer 2

我解决了以下尝试：

<div ng-controller="ListBottomSheetCtrl" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
<div class="cnt" ng-init="menuIsOpen= false; menu2IsOpen= false">
    <md-list ng-click="menuIsOpen = !menuIsOpen; menu2IsOpen = false" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
        <span class="title flex" flex=""> Menu Item</span>
        <i class="fa fa-chevron-down"></i>
    </md-list>
    <div class="sub-menu">
        <ul ng-show="menuIsOpen">
            <md-menu-item ng-repeat="item in data">
                <md-button>
                    <div layout="row" flex="">
                        <a ui-sref="{{item.link}}">
                            <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                        </a>
                    </div>
                </md-button>
            </md-menu-item>
        </ul>
    </div>
    <md-list ng-click="menu2IsOpen = !menu2IsOpen; menuIsOpen = false" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
        <span class="title flex" flex=""> Menu Item 2</span>
        <i class="fa fa-chevron-down"></i>
    </md-list>
    <div class="sub-menu">
        <ul  ng-show="menu2IsOpen">
            <md-menu-item ng-repeat="item in data">
                <md-button>
                    <div layout="row" flex="">
                        <a ui-sref="{{item.link}}">
                            <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                        </a>
                    </div>
                </md-button>
            </md-menu-item>
        </ul>
    </div>
</div>      

这是代码笔