在Javascript中创建可折叠的json树结构

我已经编写了javascript代码，它将带有json条目的文件作为输入，并为其生成树结构。下面是同样的提琴：

您可以通过输入以下文件来测试它

现在我想让这个树结构可以折叠，这样json中的节点就可以展开/折叠。为了实现这一点，我参考以下代码：

我也尝试过使用这个基本的可折叠功能，下面是相同的代码：

HTML

<script type="text/ng-template"  id="tree_item_renderer.html">

    <button data-toggle="collapse" data-target="#demo">{{data.name}}</button>
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>


    <div id="demo" class="collapse">
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
    </div>
</script>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<ul ng-app="Application" ng-controller="TreeController">

    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>

</ul>

下面是上面代码的提琴

---

但它并没有按预期工作，即我无法扩展和折叠json树中的节点。如何更正此代码

在我的项目中添加以下链接中提到的依赖项解决了我的问题

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

项目中似乎没有包含引导javascript或css。

元素不是输入控件。为什么要在其上附加

ng model

指令？你希望它做什么？@georgeawg抱歉，它可以被删除。我将修改相同的内容。@Claies我以前没有使用过

bootstrap javascript

，它在这里有用吗？否则您将如何使用bootstrap collapse功能？折叠不是一个通用的css或JavaScript特性，您发布了一个指向引导使用示例的链接。。。。

ul {
  list-style: circle;
}

li {
  margin-left: 20px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>