<div ng-controller="menuController" class="treeview"> <table width="150px"> <tr> <td> <script type="text/ng-template" id="treeMenu"> <a href="#">{{menu.Name}}</a> <ul ng-if="(SiteMenu | filter:{ParentID : menu.Id}).length > 0"> <li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.Id} : true" ng-include="'treeMenu'"></li> </ul> </script> <ul class="main-navigation"> <li ng-repeat="menu in SiteMenu | filter:{ParentID : 0} : true" ng-include="'treeMenu'"></li> </ul> </td> </tr> </table> </div>
<script> $(document).ready(function () { $(".treeview li>ul").css('display', 'none'); $("a").click(function (e) { e.preventDefault(); $(this).toggleClass("collapse expand"); $(this).closest('li').children('ul').slideToggle(); }); }); </script>
<style> li ul { display: none; } li:hover > ul { display: block; } .treeview ul { font: 14px Arial, Sans-Serif; margin: 0px; padding-left: 20px; } .treeview > li > a { font-weight: bold; } .treeview li a { padding: 4px; font-size: 12px; display: inline-block; text-decoration: none; width: auto; } .collapse { display: inline-block; cursor: pointer; } .expand { display: inline-block; cursor: pointer; } </style>
did you have a look at angular.treeview? If this fits your needs, you don't have to do all the work yourself:
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)