Показать сообщение отдельно
  #1 (permalink)  
Старый 13.06.2013, 03:50
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Как удалить элемент из древовидной структуры?
Реализация древовидного списка
<!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.delAll = function(data) {
              data.nodes = [];
          };

          $scope.del = function(item) {
            function walk(children) {
              var i = children.length;
              while (i--) {
                if (children[i] === item) {
                  return children.splice(i, 1);
                } else {
                  walk(children[i].nodes)
                }
              }
            }
            walk($scope.nodes);
          };

          $scope.add = function(data) {
            var newName = data.name + '-' + data.nodes.length + 1;
            data.nodes.push({name: newName, nodes: []});
          };

          $scope.nodes = [
            {name: 'Узел', nodes: [
              {name: 'Морской', nodes: []},
              {name: 'Устричный', nodes: []}
            ]}
          ];
      };
    </script>
  </head>
  <body>
    <script type="text/ng-template"  id="item.html">
      {{data.name}}
      <button ng-click="add(data)">Добавить потомка</button>
      <button ng-click="delAll(data)" ng-show="data.nodes.length > 0">Удалить потомков</button> | 
      <button ng-click="add($parent.$parent.$parent.data)">Добавить узел</button>
      <button ng-click="del(data)">Удалить узел</button>
      <ul>
        <li ng-repeat="data in data.nodes" ng-include="'item.html'"></li>
      </ul>
    </script>
    <ul ng-controller="TreeController">
      <li ng-repeat="data in nodes" ng-include="'item.html'"></li>
    </ul>
  </body>
</html>

Как реализовать добавление узла к узлу того-же уровня и удаление? Знаю три способа, но все не нравятся.

В первом мы передаем (на примере добавления) ссылку на родителя в виде $parent.$parent.$parent, которая еще и зависит от шаблона зависит и нужно добавлять условия для корневых элементов.

Во втором — проходимся рекурсией по всей модели, чтобы найти нужный элемент (в примере удаление). По сути, делаем двойную работу и рекурсия в JS имеет ограничения.

В третьем — в каждый элемент модели добавляем ссылку на элемент родителя. Не хочется загромождать модель, да и перед сериализацией придется очищать ее от этих ссылок.

Что посоветуете?

Последний раз редактировалось Shitbox2, 13.06.2013 в 03:55.
Ответить с цитированием