Я ищу для отображения данных в виде древовидной структуры в веб-приложении. Я надеялся использовать Angular для этой задачи.
Похоже, что ng-repeat позволит мне перебирать список узлов, но как я могу тогда делать вложение, когда глубина данного узла увеличивается?
Я попробовал следующий код , но авто-экранирование HTML не позволяет этому работать. Кроме того, конечный тег ul находится не в том месте.
Я почти уверен, что иду по этой проблеме совершенно неправильно.
Любые идеи?
Ответы:
Взгляни на эту скрипку
Оригинал: http://jsfiddle.net/brendanowen/uXbn6/8/
Обновлено: http://jsfiddle.net/animaxf/uXbn6/4779/
Это должно дать вам хорошее представление о том, как отображать
tree like structure
угловой. Это своего рода использование рекурсии в HTML!источник
Если вы используете Bootstrap CSS ...
Я создал простой многократно используемый элемент управления (директива) для AngularJS на основе списка "nav" в Bootstrap. Я добавил дополнительные отступы, иконки и анимацию. Атрибуты HTML используются для конфигурации.
Он не использует рекурсию.
Я назвал это angular-bootstrap-nav-tree (броское имя, вы не думаете?)
Существует пример здесь , и источник здесь .
источник
При создании чего-то подобного лучшим решением является рекурсивная директива. Однако, когда вы делаете такую директиву, вы обнаруживаете, что AngularJS попадает в бесконечный цикл.
Решением для этого является позволить директиве удалить элемент во время события компиляции, а затем вручную скомпилировать и добавить их в события ссылки.
Я узнал об этом в этой теме и абстрагировал эту функциональность в сервис .
С помощью этого сервиса вы можете легко создать директиву дерева (или другие рекурсивные директивы). Вот пример директивы дерева:
Смотрите этот Plunker для демонстрации. Мне больше нравится это решение, потому что:
Обновление: добавлена поддержка пользовательских функций связывания.
источник
Angular-UI-Tree, кажется, делает хорошую работу для меня
источник
Вот пример использования рекурсивной директивы: http://jsfiddle.net/n8dPm/ Взято из https://groups.google.com/forum/#!topic/angular/vswXTes_FtM
источник
Этот кажется немного более полным: https://github.com/dump247/angular.tree
источник
Другой пример, основанный на оригинальном источнике , с образцовой древовидной структурой (уже видно, как работает IMO) и фильтром для поиска в дереве:
JSFiddle
источник
Так много отличных решений, но я чувствую, что все они так или иначе слишком усложняют вещи.
Я хотел создать что-то, что воссоздает простоту awnser @Mark Lagendijk, но без определения шаблона в директиве, а скорее позволит «пользователю» создать шаблон в HTML ...
С идеями, взятыми с https://github.com/stackfull/angular-tree-repeat и т. Д. ... В итоге я создал проект: https://github.com/dotJEM/angular-tree
Что позволяет вам построить свое дерево, как:
Что для меня чище, чем создавать несколько директив для деревьев с разной структурой ... По сути, вызов вышеупомянутого дерева является немного ложным, он намного лучше извлекает из "рекурсивных шаблонов" @ ganaraj, но позволяет нам определить шаблон, где нам нужно дерево.
(Вы можете сделать это с помощью шаблона на основе тега сценария, но он все еще должен находиться прямо за узлом фактического дерева, и он все еще чувствует себя немного юк ...)
Оставленный здесь только для другого выбора ...
источник
Вы можете попробовать с образцом Angular-Tree-DnD с Angular-Ui-Tree, но я отредактировал, совместимость с таблицей, сеткой, списком.
источник
На основе @ganaraj «s ответ , и @ dnc253» s ответ , я только что сделал простую „директиву“ для древовидной структуры , имеющей Выбор, добавления, удаления и редактирования функции.
Jsfiddle: http://jsfiddle.net/yoshiokatsuneo/9dzsms7y/
HTML:
JavaScript:
источник
Да, это определенно возможно. Вопрос здесь, вероятно, предполагает Angular 1.x, но для дальнейшего использования я включаю пример Angular 2:
Концептуально все, что вам нужно сделать, это создать рекурсивный шаблон:
Затем вы связываете объект дерева с шаблоном и позволяете Angular творить чудеса. Эта концепция, очевидно, применима и к Angular 1.x.
Вот полный пример: http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0
источник
Для этого вы можете использовать угловой рекурсивный инжектор: https://github.com/knyga/angular-recursion-injector
Позволяет делать неограниченную глубину вложенности с кондиционированием. Выполняет перекомпиляцию только при необходимости и компилирует только нужные элементы. Никакой магии в коде.
Одной из вещей, которая позволяет ему работать быстрее и проще, чем другие решения, является суффикс "--recursion".
источник
Когда древовидная структура велика, Angular (до 1.4.x) становится очень медленным при рендеринге рекурсивного шаблона. Попробовав ряд этих предложений, я создал простую строку HTML и использовал ее
ng-bind-html
для отображения. Конечно, это не способ использовать угловые функцииЗдесь показана рекурсивная функция голых костей (с минимальным HTML):
В шаблоне нужна только одна строка:
Это обходит все привязки данных Angular и просто отображает HTML за долю времени рекурсивных шаблонных методов.
С такой структурой меню (частичное дерево файлов файловой системы Linux):
Выход становится:
источник
Не сложно.
код контроллера:
источник