Отличная идея! Пока возьму пару примеров
оттуда, а потом отсюда что-нибудь туда :-)
Редактируемый древовидный список
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script>
angular.module("myApp", []);
function TreeController($scope) {
$scope.delete = function(data) {
data.nodes = [];
};
$scope.add = function(data) {
var post = data.nodes.length + 1;
var newName = data.name + '-' + post;
data.nodes.push({name: newName,nodes: []});
};
$scope.tree = [
{name: 'Узел', nodes: [
{name: 'Морской', nodes: []},
{name: 'Устричный', nodes: []}
]}
];
};
</script>
</head>
<body>
<script type="text/ng-template" id="item.html" ng-init="data.edit=false" >
<span ng-show="data.edit">
<input type="text" value="{{data.name}}" ng-model="data.name"/>
<button ng-click="data.edit=false">сохр.</button>
</span>
<span ng-hide="data.edit">
{{data.name}}
<button ng-click="data.edit=true">ред.</button>
</span>
<button ng-click="add(data)">Добавить узел</button>
<button ng-click="delete(data)" ng-show="data.nodes.length > 0">Удалить узел</button>
<ul>
<li ng-repeat="data in data.nodes" ng-include="'item.html'" class="node"></li>
</ul>
</script>
<ul ng-controller="TreeController">
<li ng-repeat="data in tree" ng-include="'item.html'" class="node"></li>
</ul>
</body>
</html>