AngularJS递归指令实现Tree View效果示例

本文实例讲述了AngularJS递归指令实现Tree View效果的方法。分享给大家供大家参考,具体如下:

在层次数据结构展示中,树是一种极其常见的展现方式。比如系统中目录结构、企业组织结构、电子商务产品分类都是常见的树形结构数据。

这里我们采用Angular的方式来实现这类常见的tree view结构。

首先我们定义数据结构,采用以children属性来挂接子节点方式来展现树层次结构,示例如下:

[
  {
   "id":"1",
   "pid":"0",
   "name":"家用电器",
   "children":[
     {
      "id":"4",
      "pid":"1",
      "name":"大家电"
     }
   ]
  },
  {
   ...
  }
  ...
]

则我们对于ng way的tree view可以实现为:

JavaScript:

angular.module('ng.demo', [])
.directive('treeView',[function(){
   return {
     restrict: 'E',
     templateUrl: '/treeView.html',
     scope: {
       treeData: '=',
       canChecked: '=',
       textField: '@',
       itemClicked: '&',
       itemCheckedChanged: '&',
       itemTemplateUrl: '@'
     },
     controller:['$scope', function($scope){
       $scope.itemExpended = function(item, $event){
         item.$$isExpend = ! item.$$isExpend;
         $event.stopPropagation();
       };
       $scope.getItemIcon = function(item){
         var isLeaf = $scope.isLeaf(item);
         if(isLeaf){
           return 'fa fa-leaf';
         }
         return item.$$isExpend ? 'fa fa-minus': 'fa fa-plus';
       };
       $scope.isLeaf = function(item){
        return !item.children || !item.children.length;
       };
       $scope.warpCallback = function(callback, item, $event){
         ($scope[callback] || angular.noop)({
           $item:item,
           $event:$event
         });
       };
     }]
   };
 }]);

HTML:

树内容主题HTML: /treeView.html

<ul class="tree-view">
    <li ng-repeat="item in treeData" ng-include="'/treeItem.html'" ></li>
</ul>

每个item节点的HTML:/treeItem.html

<i ng-click="itemExpended(item, $event);" class=""></i>
<input type="checkbox" ng-model="item.$$isChecked" class="check-box" ng-if="canChecked" ng-change="warpCallback('itemCheckedChanged', item, $event)">
<span class='text-field' ng-click="warpCallback('itemClicked', item, $event);"></span>
<ul ng-if="!isLeaf(item)" ng-show="item.$$isExpend">
  <li ng-repeat="item in item.children" ng-include="'/treeItem.html'">
  </li>
</ul>

这里的技巧在于利用ng-include来加载子节点和数据,以及利用一个warpCallback方法来转接函数外部回调函数,利用angular.noop的空对象模式来避免未注册的回调场景。对于View交互的数据隔离采用了直接封装在元数据对象的方式,但它们都以$$开头,如$$isChecked、$$isExpend。在Angular程序中以$$开头的对象会被认为是内部的私有变量,在angular.toJson的时候,它们并不会被序列化,所以利用$http发回服务端更新的时候,它们并不会影响服务端传送的数据。同时,在客户端,我们也能利用对象的这些$$属性来控制View的状态,如item.$$isChecked来默认选中某一节点。

我们就可以如下方式来使用这个tree-view:

代码如下:

<tree-view tree-data="demo.tree" text-field="name" value-field='id' item-clicked="demo.itemClicked($item)" item-checked-changed="demo.itemCheckedChanged($item)" can-checked="true"></tree-view>

效果如下:

希望本文所述对大家AngularJS程序设计有所帮助。

(0)

相关推荐

  • Vue.js 递归组件实现树形菜单(实例分享)

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m

  • javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)

    本文实例讲述了javascript实现网页子页面遍历回调的方法(涉及 window.frames.递归函数.函数上下文).分享给大家供大家参考.具体如下: 提炼于本人手写的纯 JavaScript 工具程序,用于遍历当前网页的所有子页面 并执行迭代回调,且回调函数返回值可用于结果回传,有助于减少闭包变量~ 其特点在于 -- 递归遍历时只检索子页面的 Window 对象,不立即执行回调函数,而是在检索结束后在普通循环结构中回调.这样可以尽量减少 递归调用时的内存消耗,也简化了程序结构,易于维护 全

  • 一个JavaScript递归实现反转数组字符串的实例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-递归实现反转数组字符串</title> <script> var func = function(x,indx,str){ return

  • Javascript 实现匿名递归的实例代码

    递归是一种常见的编程技巧,实名递归相信大家都不陌生,但如果想要实现匿名递归呢?比如想要返回一个匿名递归函数,又或者是定义一个匿名递归函数并直接调用它,该怎样去做呢?本文将来探讨一下它的实现. 实名递归 我们还是先从实名递归说起吧,还是用那个最简单的求阶乘的例子: function fact(n) { if (n < 2) { return n; } else { return n * fact(n - 1); } } console.log(fact(5)); 递归要求自己调用自己,如果函数有名

  • 利用java+mysql递归实现拼接树形JSON列表的方法示例

    前言 本文给大家介绍的是关于利用java+mysql递归实现拼接树形JSON列表的相关内容,分享出来供大家参考学习,话不多说,来一起看看详细的介绍: 我们在做Java web项目时,前端控件例如国家-省-市-区-县等树形列表,常常需要多级树形json数据 例如: [ { "name": "商品目录", "pid": "-1", "id": "1", "children"

  • JS基于递归实现倒计时效果的方法

    本文实例讲述了JS基于递归实现倒计时效果的方法.分享给大家供大家参考,具体如下: 效果: 事件: //发送验证码 $('.js-sms-code').click(function(){ $(this).attr("disabled", "disabled").html("<span style='color:#666'><span id='countdown'>60</span>s 后再试</span>&qu

  • JavaScript中递归实现的方法及其区别

    递归函数:递归函数是在通过名字调用自身的情况下构成的. 递归实现阶乘函数: 方法一:通过使用函数的名字 function factorial(num){ if(num<=1){ return 1; }else{ return num*factorial(num-1); } } console.log(factorial(4)); 结果为:24: 但是这种方法实现递归有一个问题,观察以下代码: function factorial(num){ if(num<=1){ return 1; }els

  • JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法

    本文实例讲述了JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法.分享给大家供大家参考,具体如下: var array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; function reverseDump(start) { start++; if (start > array.length / 2) { return; } var temp = array[start]; array[start] = array[array.length - start

  • java、js中实现无限层级的树形结构方法(类似递归)

    js中: var zNodes=[ {id:0,pId:-1,name:"Aaaa"}, {id:1,pId:0,name:"A"}, {id:11,pId:1,name:"A1"}, {id:12,pId:1,name:"A2"}, {id:13,pId:1,name:"A3"}, {id:2,pId:0,name:"B"}, {id:21,pId:2,name:"B1&qu

  • AngularJS递归指令实现Tree View效果示例

    本文实例讲述了AngularJS递归指令实现Tree View效果的方法.分享给大家供大家参考,具体如下: 在层次数据结构展示中,树是一种极其常见的展现方式.比如系统中目录结构.企业组织结构.电子商务产品分类都是常见的树形结构数据. 这里我们采用Angular的方式来实现这类常见的tree view结构. 首先我们定义数据结构,采用以children属性来挂接子节点方式来展现树层次结构,示例如下: [ { "id":"1", "pid":&quo

  • 用AngularJS的指令实现tabs切换效果

    先来看看效果图 首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: <A-deirective> <B-directive></B-directive> <C-directive></C-directive> </A-directive> 下面这个tabs功能的指令,刚好用到了这个,可以让代码更加简洁. <!DOCTYPE html> <html lang="en"

  • Angularjs自定义指令实现三级联动 选择地理位置

    Angularjs自定义指令实现三级联动效果,先上图 代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo

  • Angularjs渲染的 using 指令的星级评分系统示例

    本文介绍Angularjs渲染的 using 指令的星级评分系统示例,分享给大家,具体如下: 我试图创建静态使用 angularjs/离子成效甚微的星级评分系统.但目前什么都不输出到屏幕上......我是我做错了吗? service.html <ion-list> <ion-item ng-repeat="business in businessList track by $index" class="item-icon-right"> &l

  • Android自定义view仿QQ的Tab按钮动画效果(示例代码)

    话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的错位感,代码很简单: import android.content.Context import android.graphics.* import android.util.AttributeSet import android.view.MotionEvent import android.vi

  • AngularJS基础 ng-disabled 指令详解及简单示例

    AngularJS ng-disabled 指令 AngularJS 实例 禁用或启用输入框: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> &

  • Android实现雷达View效果的示例代码

    样式效果 还是先来看效果: 这是一个仿雷达扫描的效果,是之前在做地图sdk接入时就想实现的效果,但之前由于赶着毕业设计,就没有亲手去实现,不过现在自己撸一个发现还是挺简单的. 这里主要分享一下我的做法. 目录 主体轮廓的实现(雷达的结构) 动画的实现(雷达扫描的效果) 目标点的加入(图片/点) 主体轮廓实现 不难分析得出,这个View主要由外部的一个圆,中间的锚点圆以及扇形旋转区域组成.而且每个部分理应由不同的Paint去绘制,以方便去定制各部分的样式. 外部圆以及锚点圆的绘制较为简单,主要的点

  • 学习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 ng-repeat指令及Ajax的应用实例分析

    本文实例讲述了AngularJS ng-repeat指令及Ajax的应用.分享给大家供大家参考,具体如下: ng-repeat 指令用于循环输出指定次数的 HTML 元素.集合必须是数组或对象. 定义: <element ng-repeat="expression"></element> 说明:experssion表达式定义了如何循环集合.常用的如:x in records 下面通过一个例子,来说明ng-repeat如何绘制一个表格: <div ng-ap

  • Angularjs自定义指令实现分页插件(DEMO)

    由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能.现在单独做了个简易的小demo,主要是为了分享自己写的分页功能.注:本实例调用的是真实接口数据. 首先.小demo的目录结构如下: 一.代码部分 下面直接把每一个文件的代码贴出来,重点是ListCtrl.js和pageDirective.js: 1.index.html <!DOCTYPE html> <html lang="en" ng-app=&

随机推荐