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

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

效果图:

Angular directive递归实现目录树结构代码实例_第1张图片

重点:

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递归实现目录树结构代码实例)