Javascript.RU

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

Как удалить элемент из древовидной структуры?
Реализация древовидного списка
<!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 в 02:55.
Ответить с цитированием
  #2 (permalink)  
Старый 14.06.2013, 07:55
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Есть четвёртый способ
сделать узел директивой, с изолированным scope, в качестве параметра скармливать только ту область данных на которую узел может влиять.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 14.06.2013 в 07:59.
Ответить с цитированием
  #3 (permalink)  
Старый 16.06.2013, 10:02
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 562

Да вот только как это сделать? Дело в том, что узел и так имеет изолированную область видимости. т.к. формируется ng-repeat. Проблема в том, что не получается расширить ng-repeat. Вот тут описаны способы расширения: http://angular.ru/guide/understanding_directives и ни один не подходит. ng-repeat терминальная директива, поэтому всегда выполняется последней и все навешенные после нее директивы просто не будут работать. Можно, конечно, попробовать назвать свою директиву ng-repeat, но как-то стремно делать такое со стандартной директивой...
Ответить с цитированием
  #4 (permalink)  
Старый 30.04.2014, 14:48
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 04.06.2009
Сообщений: 1,703

http://habrahabr.ru/sandbox/75566/
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как удалить элемент в DOM? czp Общие вопросы Javascript 11 17.12.2011 18:55
Освобождение памяти или как удалить this? Greck Общие вопросы Javascript 16 14.12.2011 09:29
как найти и удалить массив из массива? FRIE Общие вопросы Javascript 8 14.03.2011 14:48
Как удалить элемент из дерева DOM dummer jQuery 13 16.01.2011 15:19
Как передать элемент в функцию после createElement Oleg NT Общие вопросы Javascript 3 23.06.2008 01:11