AngularJS: Формирование древовидной структуры

0

Возможно ли создать древовидную структуру в AngularJS, как показано на рисунке ниже?

Фотография взята с сайта: jsonviewer.stack.hu

Изображение 174551

Мой HTML-код

    <body ng-controller="myCtrl" data-ng-init="init()">
<input type="text" ng-model="queryColumnName">

<div id="treeNav">
    <ul id="tree">
        <li ng-repeat="component in components | filter: queryColumnName" ng-include="'objectTree'"></li>
    </ul>
</div>

<script src="angular.min.js" type="text/javascript"></script>
<script type="text/ng-template" id="objectTree">
    {{ component.ViewName }}
    <ul ng-if="component.ViewComponent">
        <li ng-repeat="component in component.ViewComponent | filter: queryColumnName" ng-include="'objectTree'">
        </li>
    </ul>
</script>

<script type="text/javascript">
    myApp = angular.module('myApp', []);
    myApp.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.init = function () {
            $http.get('data.json').success(function (data) {
                $scope.components = data;
            }).error(function (data) {
                console.log('Error');
            });
        };
    }]);
</script>
</body>

Мои данные JSON

[{
"ViewName": "BASE_VIEW",
"ViewComponent": [{
    "ViewName": "BASE_COMP2",
    "ViewComponent": [{
        "ViewName": "COMP_COMP2",
        "ViewComponent": [{
            "ViewName": "FND_USER",
            "ViewComponent": []
        }]
    }, {
        "ViewName": "EIS_RS_REPORTS",
        "ViewComponent": [{
            "ViewName": "EIS_RS_REPORT_COLUMNS",
            "ViewComponent": []
        }, {
            "ViewName": "EIS_RS_REPORT_COND_HEADERS",
            "ViewComponent": [{
                "ViewName": "EIS_RS_REPORT_COND_DETAILS",
                "ViewComponent": []
            }]
        }, {
            "ViewName": "EIS_RS_REPORT_PARAMETERS",
            "ViewComponent": []
        }, {
            "ViewName": "EIS_RS_VIEWS",
            "ViewComponent": [{
                "ViewName": "EIS_RS_VIEW_COLUMNS",
                "ViewComponent": []
            }]
        }]
    }]
}, {
    "ViewName": "BASE_COMP1",
    "ViewComponent": [{
        "ViewName": "EIS_RS_REPORTS",
        "ViewComponent": [{
            "ViewName": "EIS_RS_REPORT_COLUMNS",
            "ViewComponent": [{

            }]
        }, {
            "ViewName": "EIS_RS_REPORT_COND_HEADERS",
            "ViewComponent": [{
                "ViewName": "EIS_RS_REPORT_COND_DETAILS",
                "ViewComponent": []
            }]
        }, {
            "ViewName": "EIS_RS_REPORT_PARAMETERS",
            "ViewComponent": []
        }, {
            "ViewName": "EIS_RS_VIEWS",
            "ViewComponent": [{
                "ViewName": "EIS_RS_VIEW_COLUMNS",
                "ViewComponent": []
            }]
        }]
    }]
}]

}]

Мой выход

Изображение 174551

Я проверил угловое дерево, но это слишком сложно для моего требования. Пожалуйста, дайте мне знать, есть ли какие-либо сторонние библиотеки, которые дадут мне простую древовидную структуру, которая имеет возможность рушиться и расширяться.

  • 0
    Все, что вам нужно, это одна директива, и ответ на стеке потока
  • 1
    Это единственная рекурсивная директива , все, что вам нужно сделать, это изменить шаблон в принятом ответе и покажет вашему дяде
Показать ещё 1 комментарий
Теги:

2 ответа

0
Лучший ответ

После того, как многие поиски получили решение

Проверьте демонстрационный файл angularjs-tree-view

Исходный код источника углового дерева

Надеюсь, это будет полезно для других.

Поделиться
0

пожалуйста, обратитесь к angular.treeview, который может помочь вам понять.

Поделиться
  • 0
    ссылка, которую вы предоставили, выглядит великолепно. Но вы сталкивались с тем, что я дал на первом изображении. Он имеет пунктирные линии.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню