带有ng-show的AngularJS子菜单指令

问题描述

我已经为我的sidenav发出了指令.在我的sidenav中，我有一些元素在其下包含子菜单项.目前，我只能在sidenav中切换一个元素，但我至少还需要2-3个.我应该如何实施?

I have made a directive for my sidenav. In my sidenav I have some elements that have submenu items under them. At the moment I can toggle only one element in the sidenav, but I need atleast 2-3 more. How should I implement it ?

我的指令代码:

menuItem.directive("menuItem", function() {
 return {
     restrict: "E",
     template: "<div ng-click='toggle($event)' ng-transclude></div>",
     transclude: true,
     scope: {
         hash: "@",
         show: '=',
     },
     link: function($scope) {
         $scope.toggle = function(e) {
            $scope.show = !$scope.show;
         }

     }
 }
 });

我的html代码:

<menu visible="leftVisible" alignment="left">
<menu-item hash="first" show="someVar">

    Side Menu item
    <ul ng-show="someVar">
        <li>
            <a>First submenu item</a>
        </li>
        <li>
            <a>First submenu item</a>
        </li>
    </ul>
</menu-item>
<menu-item hash="second" show="someVar">

    Side Menu item
    <ul ng-show="someVar">
        <li>
            <a >Second submenu item</a>
        </li>
        <li>
            <a >Second submenu item</a>
        </li>
    </ul>
</menu-item>
<menu-item hash="third">Side Menu item</menu-item>
</menu>

我的目标是我可以在sidenav中使用ng-show单独打开子菜单，任何想法如何实现?

My goal is that I can open submenus individually with ng-show in the sidenav, any ideas how to do it?

推荐答案

如果您有固定的菜单项列表，则可以为每个菜单项使用单独的变量，像这样

If you have a fixed list of menu items, you can use separate variables for each menu item, like this

<menu visible="leftVisible" alignment="left">
    <menu-item hash="first" show="menu1">

        Side Menu item
        <ul ng-show="menu1">
            <li>
                <a>First submenu item</a>
            </li>
            <li>
                <a>First submenu item</a>
            </li>
        </ul>
    </menu-item>
    <menu-item hash="second" show="menu2">

        Side Menu item
        <ul ng-show="menu2">
            <li>
                <a >Second submenu item</a>
            </li>
            <li>
                <a >Second submenu item</a>
            </li>
        </ul>
    </menu-item>
    <menu-item hash="third">Side Menu item</menu-item>
</menu>

在这种情况下，变量menu1负责第一项的可见性，menu2-第二项的可见性，等等.

In this case variable menu1 is responsible for visibility of the first item, menu2 - visibility of the second one, etc.

但是，如果要遍历某个数组，则可以为每个菜单项使用一个特定的字段.

But if you are iterating over some array, you can use a specific field for each menu item.

<menu visible="leftVisible" alignment="left">
    <menu-item ng-repeat="item in items" hash="{{item.hash}}" show="item.show">
        {{item.title}}
        <ul ng-show="item.show">
            <li ng-repeat="subItem in item.items">
                <a>{{subItem.title}}</a>
            </li>
        </ul>
    </menu-item>
</menu>

在这种情况下，每个数组项都使用show字段.

In this case you use show field for each array item.

这篇关于带有ng-show的AngularJS子菜单指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！