angularJs实现动态控制侧边栏菜单

来源：互联网发布：ubuntu 16.04 hadoop 编辑：程序博客网时间：2024/06/15 13:43

应项目的不同所以菜单的层级也不固定，所以在这里我写了5层菜单，哈哈。首先是html代码。

//菜单html代码

<ul class="page-sidebar-menu">    <li ng-repeat="menu in menus">        <a ui-sref={{menu.router}} style="cursor: pointer"  ng-click="getMenuName([menu])">            <i class={{menu.class}}></i>            <span class="title">{{menu.name}}</span>            <span class={{menu.span}}></span>        </a>        <ul class="sub-menu">            <li  ng-repeat="child in menu.children">                <a ui-sref="{{child.router}}" style="cursor: pointer" ng-click="getMenuName([menu,child])">                    <i class={{child.class}}></i> {{child.name}}                    <span class={{child.span}}></span>                </a>                <ul class="sub-menu">                    <li ng-repeat="third in child.thirds">                        <a ui-sref={{third.router}} style="cursor: pointer" ng-click="getMenuName([menu,child,third])">                            <i class="icon-cogs"></i> {{third.name}}                            <span class={{third.span}}></span>                        </a>                        <ul class="sub-menu">                            <li ng-repeat="four in third.fourth">                                <a ui-sref={{four.router}} style="cursor: pointer" ng-click="getMenuName([menu,child,third,four])">                                    <i class={{four.class}}></i>{{four.name}}                                    <span class={{four.span}}></span>                                </a>                                <ul class="sub-menu">                                    <li ng-repeat="five in four.fifth">                                        <a ui-sref={{five.router}} style="cursor: pointer" ng-click="getMenuName([menu,child,third,four,five])">                                            {{five.name}}                                            <span class={{five.span}}></span>                                        </a>                                    </li>                                </ul>                            </li>                        </ul>                    </li>                </ul>            </li>        </ul>    </li></ul>

//面包屑html代码

   <div>            <ul class="breadcrumb">                 <li ng-repeat="breadcrumb in breadcrumbs">                     <i class="icon-home breadcrumb-home" ng-if="$index<=0"></i>                     <a href="#" class="breadcrumb-text">{{breadcrumb.name}}</a>                     <i class="icon-angle-right" ng-if="$index!=breadcrumbs.length-1"></i>                 </li>             </ul>        </div>

在相对应控制菜单的controller里调用菜单数据，并完成页面面包屑的操作。

//获取菜单数据

$scope.getMenulist = function () {            $http.get(ctx+"/app/common/menuList.json").success(function (data) {                $scope.menus = data;                $rootScope.menus = data;            })        };        $scope.getMenulist()；

//面包屑

$scope.getMenuName = function (menuList) {/* [menu,child,third] */            if (menuList.length > 0 && menuList[menuList.length - 1].router) {                $rootScope.breadcrumbs = menuList;                $scope.breadcrumbs = $rootScope.breadcrumbs;            }        };

2 0