时间:2021-05-28
本文实例讲述了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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了AngularJS指令与指令之间的交互功能。分享给大家供大家参考,具体如下:前面一篇文章《AngularJS指令与控制器之间的交互功能示例》我们了
前言AngularJS自带指令目前有ng-include、ng-view、ng-switch、ng-repeat。这样的原因是因为,这些指令虽然是Angular
AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view和ng-template指令,以及$routePro
AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view和ng-template指令,以及$routePro
本文实例讲述了C#递归方法实现无限级分类显示效果。分享给大家供大家参考,具体如下:运行效果如下图所示:具体代码如下:C#无限级分类递归显示示例span{floa