Angular中实现树形结构视图

最新推荐文章于 2024-04-25 10:09:30 发布

liuhe688

最新推荐文章于 2024-04-25 10:09:30 发布

阅读量2.6w

点赞数 1

分类专栏： Front End

本文链接：https://blog.csdn.net/liuhe688/article/details/50966215

版权

近两年当中使用Angular开发过很多项目，其中也涉及到一些树形结构视图的显示，最近的在项目中封装了大量的组件，一些组件也有树形结构的展示，所以写出来总结一下。

相信大家都知道，树结构最典型的例子就是目录结构了吧，一个目录可以包含很多子目录，子目录又可以包含若干个子孙目录，那咱们今天就以目录结构为例来说明一下Angular中树结构的实现。

首先，我们希望封装一个组件，用于显示整个目录的树形机构，代码如下：

<!DOCTYPE html>
<html ng-app="treeDemo">
  <body>
    <div ng-controller="TreeController">
        <folder-tree current-folder="folder"></folder-tree>
    </div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

就像上面的代码一样，我们直接声明folder-tree标签，将controller中的folder数据作为参数传递进去，预期会显示出一个完整的树状目录结构。接下来我们就来定义模块，控制器，以及相应的指令部分：

angular.module('treeDemo', [])
  .controller("TreeController", function($scope) {
    $scope.folder = {
        name: 'techs',
        children: [
            {
                name: 'server-side',
                children: [
                    {
                        name: 'Java'
                    },
                    {
                        name: 'Python'
                    },
                    {
                        name: 'Node'
                    }
                ]
            },
            {

最低0.47元/天解锁文章

liuhe688

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
5
评论
Angular中实现树形结构视图

近两年当中使用Angular开发过很多项目，其中也涉及到一些树形结构的显示，最近的在项目中封装了大量的组件，其中一些组件也涉及到树形结构，所以写出来总结一下。相信大家都知道，树结构最典型的例子就是目录结构了吧，一个目录可以包含很多子目录，子目录又可以包含若干个子孙目录，那咱们今天就以目录结构为例来说明一下Angular中树结构的实现。首先，我们希望封装一个组件，用于显示整个目录的树形机构，代码如下：angular.module('treeDemo', []) .controller("TreeCo
复制链接

扫一扫