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


Posted in Javascript onMay 05, 2017

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

效果图:

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

重点:

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

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

    <ul>

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

    </ul>

  </script>

  

  <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>

  </script>

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

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

3. 源码

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.js"></script>
<script>
angular.module("treeApp", [])
.controller("treeController", function($scope){
  $scope.jsonData = {
    name: 'menu',
    children: [{
      name: 'A',
      children: [{
        name: 'A.1',
        children: [{
          name: 'A.1.1',
          children: []
        }]
      },{
        name: 'A.2',
        children: [{
          name: 'A.2.1',
          children: [{
            name: 'A.2.1.1',
            children: []
          }]
        },{
          name: 'A.2.2',
          children: []
        }]
      }]
    },{
      name: 'B',
      children: [{
        name: 'B.1',
        children: []
      },{
        name: 'B.2',
        children: []
      }]
    },{
      name: 'C',
      children: []
    }]
  };
}).directive('treeView', function(){
  return {
    restrict: 'E',
    templateUrl: 'treeView.html',
    scope: {
      treeData: '='
    },
    controller: function($scope){
      $scope.isLeaf = function(item){
        return !item.children || !item.children.length;
      };
      $scope.toggleExpandStatus = function(item){
        item.isExpand = !item.isExpand;
      };
    }
  };
});
</script>
<style>
ul{
  list-style: none;
}
.color-indictor{
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.color-indictor.leaf-node{
  background: red;
}
.color-indictor.unexpand-node{
  background: green;
}
.color-indictor.expand-node{
  background-color: yellow;
}
</style>
<body ng-app="treeApp" ng-controller="treeController">
  <div>
  <p>Introduce: Click green block expand the menu tree</p>
  <p>Red: Leaf node, can not click</p>
  <p>Green: Unexpand node, click to expand menu</p>
  <p>Yellow: Expanded node, click to unexpand menu</p>
  </div>
  <tree-view tree-data="jsonData"></tree-view>
</body>

<script type="text/ng-template" id="treeView.html">
  <ul>
    <li ng-repeat="item in treeData.children" ng-include="'treeItem.html'"></li>
  </ul>
</script>
<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>
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
webpack external模块的具体使用
Mar 10 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
微信小程序开发图片拖拽实例详解
May 05 #Javascript
javascript 中关于array的常用方法详解
May 05 #Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 #Javascript
Angular中实现树形结构视图实例代码
May 05 #Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 #Javascript
jquery中封装函数传递当前元素的方法示例
May 05 #jQuery
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 #Javascript
You might like
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Python中执行系统命令的方法示例详解
2017/09/14 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python实现爬取图书封面
2018/07/05 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
在C#中如何实现多态
2014/07/02 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
Python Django搭建文件下载服务器的实现
2021/05/10 Python
mysql中between的边界,范围说明
2021/06/08 MySQL