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 相关文章推荐
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
Node学习记录之cluster模块
May 31 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
解析原生JS getComputedStyle
May 25 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实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[19:15]DK战队纪录片
2014/09/02 DOTA
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
使用python Django做网页
2013/11/04 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python字符串下标与切片及使用方法
2020/02/13 Python
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
小学清明节活动方案
2014/03/08 职场文书
教师节演讲稿
2014/05/06 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
python通过新建环境安装tfx的问题
2022/05/20 Python