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

2024-10-07 20:53:31

整理文档，搜刮出一个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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解angularJs中自定义directive的数据交互

就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离.后者我暂时没接触,但数据交互部分却是一样的.所以举几个前者的例子,以备以后忘记. directive本身的作用域$scope可以选择是否封闭,不封闭则和其controller共用一个作用域$scope.例子如下: <body ng-app="myApp" ng-controller="myCtrl"> <test-directive><
Angular之指令Directive用法详解

项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐视频大漠穷秋 Angular实战由于篇幅过长,列举大纲如下: 一.指令directive概述指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性.不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上. 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="myApp&q
学习AngularJs:Directive指令用法（完整版）

本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope.绑定事件.更改样式等.通过这个Directiv
angularJS+requireJS实现controller及directive的按需加载示例

最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: 思路如下 1.借助ui-router里面的resolve属性来实现预加载 2.需要借助$controllerProvider动态去注册控制器,$compileProvider动态去注册指令 3.需要借助$q来帮助我们实现异步加载,具体步骤如下所示: 1.在我们定义的app(在定义app.confi
angularjs使用directive实现分页组件的示例

闲来没事,分享下项目中自己写的分页组件.来不及了,直接上车. 效果: 输入框可任意输入,并会自动提交到该页依赖项: fontawesome,bootstrap html: <ul class="page clearfix"> <li ng-hide="currentPage <= 1"> <a href="" ng-click=" rel="external nofollow"
详解angular2采用自定义指令（Directive）方式加载jquery插件

由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery,这点不再描述首先创建一个指令,采用@input方式,来获取jquery插件所需要的参数. 在ngOnChanges时,也就是参数通过@input传入时,初始化jquery插件, 初始化jquery插件需要获取dom元素,所以我们引入ElementRef,用来获取dom元素这里需要讲一下,jqu
AngularJs directive详解及示例代码

Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用directives Directive有驼峰式(camel cased)的风格的命名,如ngBind(放在属性里貌似用不了~
AngularJS中directive指令使用之事件绑定与指令交互用法示例

本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法.分享给大家供大家参考,具体如下: AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="Shield
Angular directive递归实现目录树结构代码实例

整理文档,搜刮出一个Angular directive递归实现目录树结构代码实例代码,稍微整理精简一下做下分享. 效果图: 重点: 1. 整棵目录树的实现,通过嵌套完成,主要在于对treeItem.html的递归使用 <script type="text/ng-template" id="treeView.html"> <ul> <li ng-repeat="item in treeData.children" ng
PHP递归删除目录几个代码实例

下面给大家提供几个函数参考. 实例一: 复制代码代码如下: <?php function deletedir($dir){ if(!handle=@opendir($dir)){ //检测要打开目录是否存在 die("没有该目录"); } while(false !==($file=readdir($handle))){ if($file!==".&quo
Python创建增量目录的代码实例

目录需求很简单代码使用方法总结需求很简单比如我在做机器学习实验的时候,实验结果的保存路径是'runs/exp'. 这样就会出现一个问题:当我第二次运行程序的时候,如果我忘记更改代码中的路径名或者清除上次实验结果,这次的实验结果会和上次实验结果混在一起,很头疼. 所以我希望在下次实验的时候代码自动创建一个新的目录,如:'runs/exp2',来保存新的实验结果. 代码粘贴复制,直接照着下面用就行. 下面的函数是我从yolo5里复制过来的,代码质量很高,鲁棒性很高,可以放心使用. fr
Python通过递归获取目录下指定文件代码实例

这篇文章主要介绍了python通过递归获取目录下指定文件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下获取一个目录下所有指定格式的文件是实际生产中常见需求. import os #递归获取一个目录下所有的指定格式的文件 def get_jsonfile(path,file_list): dir_list=os.listdir(path) for x in dir_list: new_x=os.path.join(path,x) if
python递归打印某个目录的内容(实例讲解)

以下函数列出某个目录下(包括子目录)所有文件,本随笔重点不在于递归函数的实现,这是一个很简单的递归,重点在于熟悉Python 库os以及os.path一些函数的功能和用法. 1. os.listdir(path): 列出path下所有内容(包括文件和目录,不包括.和..) 2. os.path.join(path1,path2,path3...): 拼接目录,例如将'home','test'拼接成'home/test/' 3. os.path.isdir(path): 判断path是否为目录代
代码实例Java IO判断目录和文件是否存在

我们先来看完整的代码: import java.io.File; public class JudgeFile { public static void main(String[] args) { File dir = new File("D:/"); //声明D磁盘 File file = new File(dir,"test"); //声明D磁盘根目录下名为test的文件 boolean d=dir.exists(); boolean f=file.exists
Java递归遍历文件目录代码实例

这篇文章主要介绍了Java递归遍历文件目录代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下在读取文件降序输出单词及其个数的基础上,将txt文件存入文件夹中,开始递归遍历文件目录,之后输出txt文件中的单词及其个数,仍然是降序排列. 代码如下 import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import java.util.Map
基于Angular.js实现的触摸滑动动画实例代码

先上图: 这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right,向左或向右的触摸事件.结合css3的transition实现的动画.ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="
PHP不用递归遍历目录下所有文件的代码

实现代码: /** * PHP 非递归实现查询该目录下所有文件 * @param unknown $dir * @return multitype:|multitype:string */ function scanfiles($dir) { if (! is_dir ( $dir )) return array (); // 兼容各操作系统 $dir = rtrim ( str_replace ( '\\', '/', $dir ), '/' ) . '/'; // 栈,默认值为传入的目录 $
Android中关于递归和二分法的算法实例代码

// 1. 实现一个函数,在一个有序整型数组中二分查找出指定的值,找到则返回该值的位置,找不到返回 -1. package demo; public class Mytest { public static void main(String[] args) { int[] arr={1,2,5,9,11,45}; int index=findIndext(arr,0,arr.length-1,12); System.out.println("index="+index); } // 1

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

相关推荐

随机推荐