AngularJS递归指令实现Tree View效果示例  更新时间:2016年11月07日 09:56:55   作者:破狼   这篇文章主要介绍了AngularJS递归指令实现Tree View效果,结合实例形式分析了AngularJS基于递归指令实现树形结构层次数据的相关操作步骤与注意事项,需要的朋友可以参考下 本文实例讲述了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 每个item节点的HTML:/treeItem.html 这里的技巧在于利用ng-include来加载子节点和数据,以及利用一个warpCallback方法来转接函数外部回调函数,利用angular.noop的空对象模式来避免未注册的回调场景。对于View交互的数据隔离采用了直接封装在元数据对象的方式,但它们都以$$开头,如$$isChecked、$$isExpend。在Angular程序中以$$开头的对象会被认为是内部的私有变量,在angular.toJson的时候,它们并不会被序列化,所以利用$http发回服务端更新的时候,它们并不会影响服务端传送的数据。同时,在客户端,我们也能利用对象的这些$$属性来控制View的状态,如item.$$isChecked来默认选中某一节点。 我们就可以如下方式来使用这个tree-view: 复制代码 代码如下: 效果如下: 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: 利用java+mysql递归实现拼接树形JSON列表的方法示例 Javascript 实现匿名递归的实例代码 JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法 Vue.js 递归组件实现树形菜单(实例分享) JS基于递归实现倒计时效果的方法 java、js中实现无限层级的树形结构方法(类似递归) javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文) 一个JavaScript递归实现反转数组字符串的实例 JavaScript中递归实现的方法及其区别 AngularJS 递归指令 Tree View 相关文章 Angular中ng-repeat与ul li的多层嵌套重复问题 这篇文章主要介绍了Angular中ng-repeat与ul li的多层嵌套重复问题,需要的朋友可以参考下 2017-07-07 在 Angular6 中使用 HTTP 请求服务端数据的步骤详解 本文分步骤给大家介绍了在 Angular6 中使用 HTTP 请求服务端数据的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-08-08 AngularJS使用ng-options指令实现下拉框 这篇文章主要介绍了AngularJS使用ng-options指令实现下拉框效果,ng-option指令使用也很简单,下文具体给大家说明,对angularjs 下拉框知识感兴趣的朋友一起看下吧 2016-08-08 Angularjs为ng-click事件传递参数 这篇文章主要介绍了Angularjs为ng-click事件传递参数的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-06-06 AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例 这篇文章主要介绍了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能,结合实例形式分析了AngularJS自定义过滤器的定义及数组过滤相关操作技巧,需要的朋友可以参考下 2018-04-04 AngularJS过滤器filter用法总结 这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式较为详细的总结分析了过滤器filter的功能、分类、使用技巧及自定义过滤器的实现方法,需要的朋友可以参考下 2016-12-12 AngularJS基础 ng-switch 指令简单示例 本文主要讲解AngularJS ng-switch 指令,这里对ng-switch 指令的基础资料做了详细整理,并附代码示例,有兴趣的小伙伴可以参考下 2016-08-08 详解Angular父子组件通讯 本文介绍了Angular父子组件是如何通讯的,对此感兴趣的同学,可以参考下,并且亲自实验一下。 2021-05-05 详解在Angular4中使用ng2-baidu-map的方法 这篇文章主要介绍了在Angular4中使用ng2-baidu-map的方法,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-06-06 AngularJS用户选择器指令实例分析 这篇文章主要介绍了AngularJS用户选择器指令,结合实例形式分析了angular指令实现选择器功能的具体操作步骤与相关实现技巧,需要的朋友可以参考下 2016-11-11 最新评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • 利用java+mysql递归实现拼接树形JSON列表的方法示例
  • Javascript 实现匿名递归的实例代码
  • JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
  • Vue.js 递归组件实现树形菜单(实例分享)
  • JS基于递归实现倒计时效果的方法
  • java、js中实现无限层级的树形结构方法(类似递归)
  • javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
  • 一个JavaScript递归实现反转数组字符串的实例
  • JavaScript中递归实现的方法及其区别
张贴在3