欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular directive递归实现目录树结构代码实例

程序员文章站 2022-06-03 12:32:39
整理文档,搜刮出一个angular directive递归实现目录树结构代码实例代码,稍微整理精简一下做下分享。 效果图: 重点: 1. 整棵目录树的实现,通...

整理文档,搜刮出一个angular directive递归实现目录树结构代码实例代码,稍微整理精简一下做下分享。

效果图:

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。