整理文档,搜刮出一个Angular directive递归实现目录树结构代码实例代码,稍微整理精简一下做下分享。
效果图:
重点:
1. 整棵目录树的实现,通过嵌套完成,主要在于对treeItem.html的递归使用
<ul>
<li ng-repeat="item in treeData.children" ng-include="'treeItem.html'"></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)"></span>
<span>{{item.name}}</span>
<ul ng-if="!isLeaf(item)" ng-show="item.isExpand">
<li ng-repeat="item in item.children" ng-include="'treeItem.html'"></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">