通过HTML和CSS就实现了多级菜单的静态展示效果，如果导航菜单不是经常变化，那么用静态的方式，把代码写死就可以了。但有一些场景，菜单是需要动态生成，比如通过权限控制访问链接，每个用户的权限不一样，那么能看到的菜单选项也就不一样，这个时候就需要做成动态的，用程序去控制菜单的加载和展示。
2. 动态多级菜单实现
有了静态多级导航菜单的HTML代码结构，改写成动态的，其实也不太复杂。
我们需要做2件事：
把导航菜单的数据结构化存储，比如 存放到文件 nav.json。
用Angularjs的API加载nav.json数据，进行展示。
我们先定义一下导航菜单的数据格式，以JSON格式定义，每个菜单项都有3个属性字段
label: 导航菜单项显示的名字。
link: 导航菜单项的跳转链接，可以不定义。
children: 导航菜单项的子菜单，循环对象存储。
{ "label": "levelA", "link": "#", "children": [ { "label": "levelB", "link": "#", "children": [] } ] }
下面我们用真实的数据定义导航菜单，以我的金融系统为例。
新建JSON数据文件：nav.json。
~ vi D:\workspace\javascript\angular-navbar\js\nav.json [ { "label": "债券", "children": [ { "label": "可转债", "children": [ {"label": "可转债溢价率分析","link":"#"}, {"label": "可转债NS定价","link":"#"}, {"label": "可转债归因分析","link":"#"}, {"label": "可转债套利实时监控","link":"#"} ] }, { "label": "信用债", "children": [ {"label": "交易所债券监控","link":"#"} ] }, { "label": "利率债","link":"#", "children": [] }, { "label": "国债期货", "children": [ {"label": "国债期货表现分析","link":"#"}, {"label": "国债期货实时套利监控","link":"#"}, {"label": "IRR历史时间序列查询","link":"#"}, {"label": "IRR实时监控","link":"#"} ] } ] }, { "label": "股票", "children": [ { "label": "基本面分析", "children": [ {"label": "上市公司基本面数据查看","link":"#"} ] }, { "label": "量化选股策略", "children": [] } ] }, { "label": "宏观", "children": [ { "label": "宏观数据", "children": [ {"label": "宏观数据概览","link":"#"} ] }, { "label": "宏观经济预测", "children": [] }, { "label": "宏观经济和大类资产表现", "children": [] } ] } ]
我们看到这个导航菜单的数据，有3级，“债券–>可转债–>可转债归因分析”，那么接下我们就直接实现对三级菜单的编程。创建HTML文件page4.html。
~ vi D:\workspace\javascript\angular-navbar\page4.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>多级动态导航菜单</title> <meta content="多级动态导航菜单"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0"> <meta content="!" /> <link href="https://www.jb51.net/bower_components/bootstrap/dist/css/bootstrap.min.css" > <link href="https://www.jb51.net/css/main.css" > </head> <body ng-app="page4"> <div> <div ng-controller="NavbarCtrl"> <nav role="navigation"> <div> <a href="https://www.jb51.net/" >量化投资平台</a> </div> <div> <ul> <li ng-repeat="a1 in navbar"> <a href="?{{ a1.label }}" data-toggle="dropdown">{{ a1.label }} <b></b></a> <ul> <li ng-repeat="a2 in a1.children"> <a tabindex="-1" href="?{{ a2.label }}" >{{ a2.label }}</a> <ul ng-show="a2.children.length>0"> <li ng-repeat="a3 in a2.children"> <a href="?{{ a3.label }}" ng-click="go(a3.link)">{{ a3.label }}</a> </li> </ul> </li> </ul> </li> </ul> </div> </nav> </div> </div> <script src="https://www.jb51.net/bower_components/jquery/dist/jquery.min.js"></script> <script src="https://www.jb51.net/bower_components/angular/angular.min.js"></script> <script src="https://www.jb51.net/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/bower_components/angular-route/angular-route.min.js"></script> <script src="https://www.jb51.net/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> <script src="https://www.jb51.net/js/app.js"></script> </body> </html>
在Angularjs的控制器文件app.js文件中，增加page4的定义。