如何使用ui bootstrap下拉列表折叠菜单

时间:2017-08-10 23:00:02

标签: angularjs angular-ui-bootstrap

我有以下菜单:

  <div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
    <ul class="nav navbar-nav navbar-right">
        <li ng-show="isAuthorized(['4TierWeb-Basic User'])">
            <a id="home" class="{{selectedMenuTab === 'home' ? 'activeMenu' : ''}}" uib-tooltip="Home" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen5" ng-click="sortTooltipIsOpen5 = !sortTooltipIsOpen5 && isNavCollapsed = !isNavCollapsed" tooltip-enable="!dropdown.isopen5" role="button" aria-haspopup="true" aria-expanded="false" ui-sref="DashboardTemplate.Dashboard">
                <span class="material-icons headerIcon home"></span>
            </a>
        </li>
        <li uib-dropdown is-open="dropdown.isopen">
            <a id="applicationdropdown" class="{{selectedMenuTab === 'applications' ? 'activeMenu' : ''}}" uib-tooltip="Applications" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen" ng-click="sortTooltipIsOpen = !sortTooltipIsOpen" tooltip-enable="!dropdown.isopen" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
                <span class="material-icons headerIcon laptop"></span>
            </a>
            <ul uib-dropdown-menu aria-labelledby="applicationdropdown">
                <li ng-repeat="item in applicationsMenu">
                    <a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
                        <span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;"></span>{{item.heading}}
                    </a>
                </li>
            </ul>
        </li>
        <li uib-dropdown is-open="dropdown.isopen3">
            <a id="billingsdropdown" class="{{selectedMenuTab === 'billings' ? 'activeMenu' : ''}}" uib-tooltip="Billings" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen3" ng-click="sortTooltipIsOpen3 = !sortTooltipIsOpen3" tooltip-enable="!dropdown.isopen3" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
                <span class="material-icons headerIcon monetization_on"></span>
            </a>
            <ul uib-dropdown-menu aria-labelledby="billingsdropdown">
                <li ng-repeat="item in billingsMenu">
                    <a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
                        <span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;">
                                        </span>{{item.heading}}
                    </a>
                </li>
            </ul>
        </li>
        <li uib-dropdown is-open="dropdown.isopen4">
            <a id="settingsdropdown" class="{{selectedMenuTab === 'settings' ? 'activeMenu' : ''}}" uib-tooltip="Settings" tooltip-placement="bottom" tooltip-is-open="sortTooltipIsOpen4" ng-click="sortTooltipIsOpen4 = !sortTooltipIsOpen4" tooltip-enable="!dropdown.isopen4" role="button" aria-haspopup="true" aria-expanded="false" uib-dropdown-toggle>
                <span class="material-icons headerIcon settings"></span>
            </a>
            <ul uib-dropdown-menu aria-labelledby="settingsdropdown">
                <li ng-repeat="item in settingsMenu">
                    <a ng-show="item.enabled" ui-sref-active="activeMenu" ui-sref="{{item.route}}">
                        <span class="material-icons {{item.icon}}" ng-click="isNavCollapsed = !isNavCollapsed" style="margin-right: 2px;"></span>{{item.heading}}
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

目前,当您点击链接时,它会关闭下拉列表,但不会关闭整个汉堡包,当有人点击链接时,如何关闭菜单?

我尝试过几种不同的方式设置isNavCollapsed而没有效果。

部分底层控制器代码:

 $scope.isNavCollapsed = true;

$scope.settingsMenu = [
            {
                heading: 'Companies',
                route: 'AdminTemplate.AdminTab.Company',
                icon: 'business'
            },
            {
                heading: 'User Admin',
                route: 'AdminTemplate.AdminTab.UserAdministration',
                icon: 'assignment_ind'
            },
            {
                heading: 'User Profile',
                route: 'AdminTemplate.AdminTab.UserProfile',
                icon: 'account_circle'
            }
        ];

基本上我在喂食

0 个答案:

没有答案