代码地址：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>
时间： 2024-11-05 23:27:14