ng 树形菜单

最新推荐文章于 2023-04-18 10:51:58 发布

weixin_30354675

最新推荐文章于 2023-04-18 10:51:58 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fxnet/p/6524976.html

版权

代码地址：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>

转载于:https://www.cnblogs.com/fxnet/p/6524976.html

weixin_30354675

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ng 树形菜单

代码地址：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...
复制链接

扫一扫