如何在AngularJS中选择可扩展树然后文本框显示数据？
JS：
var appBo = angular.module('appBo', []);
appBo.directive('tree', function() {
return {
restrict: 'E',
replace: true,
scope: {
t: '=src'
},
template: '<ul><branch ng-repeat="c in t.children" src="c"></branch></ul>'
};
})
appBo.directive('branch', function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
b: '=src'
},
template: '<li><a>{{ b.name }}</a></li>',
link: function(scope, element, attrs) {
var has_children = angular.isArray(scope.b.children);
// Manipulate HTML in DOM
if (has_children) {
element.append('<tree src="b"></tree>');
// recompile Angular because of manual appending
$compile(element.contents())(scope);
}
// Bind events
element.on('click', function(event) {
event.stopPropagation();
if (has_children) {
element.toggleClass('collapsed');
}
});
}
};
})
appBo.controller('TreelistController', function ($scope) {
$scope.categories = {
children: [
{
name: "Item A",
children: [
{
name: "Item A-1",
children: [
{
name: "Item A-1-1"
},
{
name: "Item A-1-2"
}
]
},
{
name: "Item A-2",
children: [
{
name: "Item A-2-1"
},
{
name: "Item A-2-2"
}
]
}
]
},
{
name: "Item B",
children: [
{
name: "Item B-1",
children: [
{
name: "Item B-1-1"
},
{
name: "Item B-1-2"
}
]
}
]
},
{
name: "Item C",
children: [
{
name: "Item C-1",
children: [
{
name: "Item C-1-1"
},
{
name: "Item C-1-2"
}
]
}
]
}
]
};
});
HTML：
<body ng-app='appBo'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div id="container">
<div id="left"><p>
<h1>Angular JS-Tree</h1>
<div ng-app="appBo" ng-controller="TreelistController">
<p>Catagory</p>
<tree src="categories"></tree>
</div>
</div>