Angular-UI-Tree: создать раскрывающийся список / выбрать данные из неограниченного количества вложенных массивов - PullRequest
Новая
       21

Angular-UI-Tree: создать раскрывающийся список / выбрать данные из неограниченного количества вложенных массивов

0 голосов
/ 28 сентября 2018

Я использую Angular 1.6.У меня установлены Bootstrap 4.1, [Angular UI Tree] [1] и [UI Bootstrap] [2].Я открыт для использования других библиотек, если таковые имеются, которые справляются с этим.

У меня в основном есть рекурсивно созданный, многомерный массив папок.Любой данный почтовый ящик может иметь любое количество папок, и каждая папка может иметь любое количество подпапок и т. Д.Мне как-то нужно получить элемент select или выпадающий список для списка каждой отдельной папки, независимо от того, насколько глубоко это дерево.

В настоящее время я пытаюсь использовать angular-ui-tree для достижения этой цели, но у меня возникли проблемы.Я могу сгенерировать список папок, установив для всех nodes значение data-collapsed='false', но не могу придумать, как получить этот список в сворачиваемый / переключаемый элемент.

Приведенный ниже код показывает, что он работает как обычное вложенное дерево.Мне нужно, чтобы он действовал больше как элемент выбора - поэтому откройте первый узел, затем просмотрите ВСЕ другие доступные узлы (не только следующий уровень расширяемых узлов), и когда вы выбираете один из узлов, он становится видимым в поле формыи весь элемент снова рушится.

Если есть библиотека для такого рода вещей, я открыт для ее использования.

РЕДАКТИРОВАТЬ: если у вас есть gmail и вы используете вложенные папки, перейдите на панель поиска, найдите поле поиска в нижней части всплывающего окна и щелкните его, чтобы увидеть список всех ваших вложенных папок.,Когда вы выбираете один, он заполняет всплывающую форму.Вам не нужно нажимать внутри формы, чтобы открыть каждую папку - все подпапки указаны в виде пути от его корневой папки.Это именно то, что мне нужно.

Контроллер: 

var HomeController = function ($scope, ...) {

    var vm = new HomeViewModel();
    $scope.vm = vm;

    function getFolders() {
        webApiService.getFolders(vm.selectedMailbox.id).then(function (response) {
            var hierarchicalFolder = new HierarchicalFolder();
            hierarchicalFolder.populate(response.data);
            vm.hierarchicalFolders = [];
            vm.hierarchicalFolders.push(hierarchicalFolder);
        }, (error) => { }
        );
    }
}

HTML: 

<div class="form-group row">
                <label for="folders-search" class="col-sm-2 col-form-label" translate="{{ 'FOLDERS' }}"></label>
                <div class="col-sm-10">

                    <script type="text/ng-template" id="search_nodes_renderer.html">
                        <div ui-tree-handle>
                            <div class="row">
                                <div class="col-10">
                                    <button id="folder-name" class="btn btn-block btn-sm text-left">
                                        {{hierarchicalFolder.details.folderPath}}
                                    </button>
                                </div>
                                <div class="col-2">
                                    <button class="btn btn-block btn-sm" data-nodrag ng-click="toggle(this)" style="text-decoration: none;">
                                        <span id="folder-chevrons" class="fas" ng-class="{'fa-chevron-right': collapsed, 'fa-chevron-down': !collapsed}" ng-show="hierarchicalFolder.hierarchicalFolders && hierarchicalFolder.hierarchicalFolders.length > 0"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div ui-tree-nodes="" ng-model="hierarchicalFolder.hierarchicalFolders" ng-if="!collapsed">
                            <a ui-tree-node ng-repeat="hierarchicalFolder in hierarchicalFolder.hierarchicalFolders" collapsed="true;" data-collapsed="true" data-nodrag="true" ng-include="'search_nodes_renderer.html'"></a>
                        </div>
                    </script>

                    <div ui-tree>
                        <div ui-tree-nodes="" ng-model="vm.hierarchicalFolders">
                            <a ui-tree-node ng-repeat="hierarchicalFolder in vm.hierarchicalFolders" ng-include="'search_nodes_renderer.html'"></a>
                        </div>
                    </div>


                </div>
            </div>

...