首页 > 代码库 > ng 树形菜单

ng 树形菜单

2024-09-07 17:05:34   213人阅读

代码地址：http://files.cnblogs.com/files/fxnet/%E5%8E%9F%E7%94%9Fjs%E6%8B%96%E6%8B%BD%EF%BC%88%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%EF%BC%89.rar

主要用到了ng的 ng-include跟指令 采用递归的方式可以无限进行遍历树结构。

 

 

<html ng-app="treeDemo">
<body>
    <div ng-controller="TreeController">
        <folder-tree current-folder="folder"></folder-tree>
    </div>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>

　　

<p ng-click="child(currentFolder)">{{currentFolder.name}}</p>  
<ul>  
    <li ng-repeat="subfolder in currentFolder.children"   
        ng-include="‘./tree.html‘"   
        ng-init="currentFolder = subfolder">  
    </li>  
</ul>

　　

<script>
    angular.module(‘treeDemo‘, [])
  .controller("TreeController", function ($scope) {
      $scope.child = function (item) {
          item.children = [{ name: item.name + "2EE"}];
          console.log(item)
      }
      $scope.folder = {
          name: ‘techs‘,
          children: [
            {
                name: ‘server-side‘,
                children: [
                    {
                        name: ‘Java‘,
                        children: [
                            { name: "J2EE" }
                        ]
                    },
                    {
                        name: ‘Python‘
                    },
                    {
                        name: ‘Node‘
                    }
                ]
            },
            {
                name: ‘front-end‘,
                children: [
                    {
                        name: ‘jQuery‘
                    },
                    {
                        name: ‘Angular‘
                    },
                    {
                        name: ‘React‘
                    }
                ]
            }
        ]
      }
  })
  .directive("folderTree", function () {
      return {
          restrict: "E",
          scope: {
              currentFolder: ‘=‘
          },
          templateUrl: ‘./tree.html‘,
          link: function ($scope) {
              $scope.child = function (item) {
                  console.log(item)
                  item.children = [{ name: item.name + "2EE"}];
              }
          }
      };
  });

</script>

　　

ng 树形菜单


联系
我们