ng-show와 함께 AngularJS 하위 메뉴

Question

내 sidenav에 대한 지침을 만들었습니다. 내 sidenav에는 하위 요소가있는 요소가 있습니다. 지금은 sidenav에서 하나의 요소 만 전환 할 수 있지만 최소한 2-3 개 이상 필요합니다. 어떻게 구현해야합니까?

내 지시어 코드 :

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-쇼 개별적으로 아이디어를 하위 메뉴를 열 수 있다는 것입니다? 이 메뉴 항목의 고정 목록이있는 경우

Answer 1

, 당신이 경우 변수에서이

<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> 

처럼, 각 메뉴 항목에 대해 별도의 변수를 사용할 수 있습니다 menu1menu2 첫 번째 항목의 가시성에 대한 책임 - 가시성

그러나 일부 배열을 반복하는 경우 각 메뉴 항목에 특정 필드를 사용할 수 있습니다.

<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 필드를 사용합니다.