Angular directive递归实现目录树结构代码实例

本篇文章主要介绍了Angular directive递归实现目录树结构代码实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

整理文档,搜刮出一个Angular directive递归实现目录树结构代码实例代码,稍微整理精简一下做下分享。

效果图:

重点:

1. 整棵目录树的实现,通过嵌套完成,主要在于对treeItem.html的递归使用

 

2. 点击展开/关闭目录树

通过ng-show对item.expand进行判断,点击item时切换其expand参数,完成目录树的打开与关闭

3. 源码

  

Introduce: Click green block expand the menu tree

Red: Leaf node, can not click

Green: Unexpand node, click to expand menu

Yellow: Expanded node, click to unexpand menu

以上就是Angular directive递归实现目录树结构代码实例的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读