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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解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详解及示例代码
Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用directives Directive有驼峰式(camel cased)的风格的命名,如ngBind(放在属性里貌似用不了~
-
angularJS+requireJS实现controller及directive的按需加载示例
最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: 思路如下 1.借助ui-router里面的resolve属性来实现预加载 2.需要借助$controllerProvider动态去注册控制器,$compileProvider动态去注册指令 3.需要借助$q来帮助我们实现异步加载,具体步骤如下所示: 1.在我们定义的app(在定义app.confi
-
学习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中directive指令使用之事件绑定与指令交互用法示例
本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法.分享给大家供大家参考,具体如下: AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="Shield
-
详解angular2采用自定义指令（Directive）方式加载jquery插件
由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery,这点不再描述 首先创建一个指令,采用@input方式,来获取jquery插件所需要的参数. 在ngOnChanges时,也就是参数通过@input传入时,初始化jquery插件, 初始化jquery插件需要获取dom元素,所以我们引入ElementRef,用来获取dom元素 这里需要讲一下,jqu
-
angularjs使用directive实现分页组件的示例
闲来没事,分享下项目中自己写的分页组件.来不及了,直接上车. 效果: 输入框可任意输入,并会自动提交到该页 依赖项: fontawesome,bootstrap html: <ul class="page clearfix"> <li ng-hide="currentPage <= 1"> <a href="" ng-click=" rel="external nofollow"
-
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