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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
JavaScript获取某一天所在的星期
Sep 05 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
php实现中文转数字
2016/02/18 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
python Django批量导入数据
2016/03/25 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python 读写中文json的实例详解
2017/10/29 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
python之拟合的实现
2019/07/19 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
python matlab库简单用法讲解
2020/12/31 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
大学生作弊检讨书
2014/02/19 职场文书
环境工程专业自荐信
2014/03/03 职场文书
团支部建设方案
2014/05/02 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript