wannacry wannacry - 1 year ago 64
AngularJS Question

nested menu not working in angularjs

I am working nested menu item in angularjs. I want menu like this


  • menu 1

    -submenu1

    -submenu2

  • menu 2

    -submenu1

    -submenu2





angular.module('myapp', ['ui.bootstrap'])
.controller("MainController", ["$scope",
function($scope){
$scope.bodyText = "Test Menu";


$scope.showSubmenu = function(item) {
if($scope.activeParentIndex === item){
$scope.activeParentIndex = "";
}else{
$scope.activeParentIndex = item;
}
}

$scope.isShowing = function(index) {
if($scope.activeParentIndex === index){
return true;
} else{
return false;
}
};

$scope.modulos =
[
{"module":"Admin System ",
"adm_modulo_id":1,
"submodule":[{"res":"Angular","url":"#/admin/1"},
{"res":"Linux","url":"#/admin/2"},
{"res":"Server","url":"#/admin/3"}
]
},
{"module":"Admin System ",
"adm_modulo_id":2,
"submodule":[{"res":"Angular","url":"#/admin/1"},
{"res":"Linux","url":"#/admin/2"},
{"res":"Server","url":"#/admin/3"}
]
}

];

}]);





Result :


  • menu 1

    -submenu1

    -submenu2


    • menu 1

      -submenu1

      -submenu2

    • menu 2

      -submenu1

      -submenu2

    • menu 2

      -submenu1

      -submenu2



    But i am facing issue menu item are duplicated. please help me.


Answer Source

You need to remove duplicate ng-repeat from sidebar-menu from your HTML and change m.submodule to item.submodule in sub-nav

<ul class="sidebar-menu">
  <li class="treeview" ng-repeat="(itemIndex, item) in modulos">
    <a ng-click="showSubmenu(itemIndex)">
      <i class="fa fa-table"></i> <span>{{item.module}}</span>
    </a>

    <ul class="sub-nav" ng-show="isShowing(itemIndex)">
      <li ng-repeat="sub_element in item.submodule">
        <a href="{{sub_element.url}}">{{sub_element.res}}</a>
      </li>
    </ul>
  </li>
</ul>

Working plunker

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download