AngularJS实现树型结构(zTree)菜单实例代码

树结构

树结构有很多种形式和实现方式。zTree是可以说是一个相对简单的、美丽的、相对简单的realization.ztree是一种多功能树依靠jQuery插件,其最大的优点是配置灵活,只要ID和PID的值是相同的,和一个简单的父子结构可以形成。加上免费的开源,越来越多的人们使用zTree。

结果如下


首先,你需要知道的双向数据绑定的AngularJS,这样我们可以更好的理解下面的代码。经过很长一段时间,我们想出了下面的代码来实现左边菜单的树结构。

要实现上述操作,您需要操作以下步骤:

添加NG应用HTML标签让AngularJS运行整个HTML文档





是我创造了自己的模块MyApp

整个菜单标记如下








仪表板




主机


主机
分组





容器




模板

监控
安装设备





用户

修改信息
修改密码
添加用户
新闻





配置






js代码如下所示


/ /创建MyApp模块
VaR MyApp = angular.module('myapp,{ })

创建一个名为左导航的控制器。
MyApp.controller('left-navigation,{ $范围、功能(范围){)
/ /定义一个navfunc函数接受一个参数
scope.navfunc美元=功能(arg){
/ /让navaction变量等于arg传入函数的值
scope.navaction美元=精氨酸;
};
});


总结

整个想法是在单击第一级导航时执行函数,并将第一级导航的名称发送到函数。然后两级导航时显示navaction变量等于其优越的导航,否则将被隐藏。以上是本文的全部内容,希望能够对大家的学习和工作带来一些帮助。如果有问题,你可以留言。