Angular1实现树形结构(ztree)菜单示例代码

绝地灬酷狼 2022-05-27 07:19 182阅读 0赞

**整个菜单的标签如下**

`<` `div` `id` `=` `"left-menu"` `ng-controller` `=` `"Left-navigation"` `class` `=` `"col-sm-2"` `style` `=` `"margin-top: 50px"` `>`

`  ` `<` `ul` `>`

`    ` ``

`    ` `<` `li` `>`

`  ` ``

`      ` `<` `a` `href` `=` `""` `ng-click` `=` `"navFunc('dashboard')"` `>仪表盘</` `a` `>`

`    ` `</` `li` `>`

`    ` ``

`    ` `<` `li` `>`

`      ` `<` `span` `><` `a` `ng-click` `=` `"navFunc('hosts')"` `href` `=` `""` `>主机</` `a` `></` `span` `>`

`      ` ``

`  ` `<` `ul` `ng-show` `=` `"navAction === 'hosts'"` `>`

`        ` `<` `li` `><` `a` `href` `=` `""` `>主机</` `a` `></` `li` `>`

`        ` `<` `li` `><` `a` `href` `=` `""` `>分组</` `a` `></` `li` `>`

`      ` `</` `ul` `>`

`    ` `</` `li` `>`

`    ` ``

`    ` `<` `li` `>`

`      ` `<` `a` `href` `=` `""` `ng-click` `=` `"navFunc('container')"` `>容器</` `a` `>`

`    ` `</` `li` `>`

`    ` ``

`    ` `<` `li` `>`

`      ` `<` `span` `><` `a` `href` `=` `""` `ng-click` `=` `"navFunc('template')"` `>模板</` `a` `></` `span` `>`

`      ` `<` `ul` `ng-show` `=` `"navAction === 'template'"` `>`

`        ` `<` `li` `><` `a` `href` `=` `""` `>监控</` `a` `></` `li` `>`

`        ` `<` `li` `><` `a` `href` `=` `""` `>装机</` `a` `></` `li` `>`

`      ` `</` `ul` `>`

`    ` `</` `li` `>`

`    ` ``

`    ` `<` `li` `>`

`      ` `<` `span` `><` `a` `href` `=` `""` `ng-click` `=` `"navFunc('users')"` `>用户</` `a` `></` `span` `>`

`      ` `<` `ul` `ng-show` `=` `"navAction === 'users'"` `>`

`        ` `<` `li` `><` `a` `href` `=` `""` `>修改资料</` `a` `></` `li` `>`

`        ` `<` `li` `><` `a` `href` `=` `""` `>修改密码</` `a` `></` `li` `>`

`        ` `<` `li` `><` `a` `href` `=` `""` `>添加用户</` `a` `></` `li` `>`

`        ` `<` `li` `><` `a` `href` `=` `""` `>消息</` `a` `></` `li` `>`

`      ` `</` `ul` `>`

`    ` `</` `li` `>`

`    ` ``

`    ` `<` `li` `>`

`      ` `<` `a` `href` `=` `""` `ng-click` `=` `"navFunc('configuration')"` `>配置</` `a` `>`

`    ` `</` `li` `>`

`  ` `</` `ul` `>`

`</` `div` `>`

**JS代码如下**

`// 创建myApp模块`

`var` `myApp = angular.module(` `'myApp'` `, [])`

`// 创建一个controller，名为Left-navigation`

`myApp.controller(` `'Left-navigation'` `, [` `'$scope'` `,` `function` `($scope) {`

`  ` `// 定义一个函数navFunc， 接受一个参数`

` ` `$scope.navFunc =` `function` `(arg) {`

` ` `// 让navAction变量等于函数传入过来的值arg`

`    ` `$scope.navAction = arg;`

`  ` `};`

`}]);`

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220527/38a9a4b737d34ab1b3a548efa524b9aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220527/382b092a9be741978f06c8855e597d13.png