Angular directive递归实现目录树结构代码实例
程序员文章站
2022-06-03 12:32:39
整理文档,搜刮出一个angular directive递归实现目录树结构代码实例代码,稍微整理精简一下做下分享。
效果图:
重点:
1. 整棵目录树的实现,通...
整理文档,搜刮出一个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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。