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

前端之家收集整理的这篇文章主要介绍了Angular directive递归实现目录树结构代码实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

效果图:

重点:

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

<ul> <li ng-repeat="item in treeData.children" ng-include="'treeItem.html'"&gt;</li> </ul>

<script type="text/ng-template" id="treeItem.html">

<span class="color-indictor" ng-class="{'leaf-node': isLeaf(item),'expand-node': !isLeaf(item) && item.isExpand,'unexpand-node': !isLeaf(item) && !item.isExpand}" ng-click="toggleExpandStatus(item)"&gt;</span>

<span>{{item.name}}</span>

<ul ng-if="!isLeaf(item)" ng-show="item.isExpand"&gt;

  <li ng-repeat="item in item.children" ng-include="'treeItem.html'"&gt;</li>

</ul>

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

<script type="text/ng-template" id="treeView.html">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章