I have a JSON object having nested nodes, which can go on for any number of level. I need to display the content of a node on click of it's parent's node. It would look something like this 
"node": [
{
"id": "id of the concept model",
"name": "Curcumin",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Node 01",
"weight": "70",
"type": "text",
"node": [
{
"id": "group11",
"name": "Node 02",
"weight": "70",
"type": "structure",
"node": []
}
]
}
]
},
{
"id": "id of the concept model",
"name": "Abuse Resistent Technology",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Category 01",
"weight": "70",
"type": "text",
"node": []
}
]
},
{
"id": "id of the concept model",
"name": "PC in Aviation",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Industry",
"weight": "70",
"type": "text",
"node": [
{
"id": "group1",
"name": "Node 01",
"weight": "70",
"type": "text",
"node": []
}
]
}
]
}
]
我在两个级别上做了类似的事情：
<div class="conceptModels">
<!--tree starts-->
<ul class="tree">
<span class="treeBlk">
<li ng-repeat="conceptModel in conceptModels.node" >
<span ng-click="levelOne=true" class="textSpan show top">{{conceptModel.name}}<span class="arrclose"></span></span>
<ul ng-show="levelOne">
<li ng-repeat="node1 in conceptModel.node">
<span ng-click="levelTwo=true" class="textSpan">{{node1.name}}<span class="arrclose"></span></span>
<ul ng-show="levelTwo">
<li ng-repeat="node2 in node1.node">
<span class="textSpan">{{node2.name}}<span class="arrclose"></span> </span>
</li>
</ul>
</li>
</ul>
</li>
</span>
</ul>
</div>
有没有办法将此解决方案推广到任意数量的级别？
Try This
var jimApp = angular.module("mainApp", []);
jimApp.controller('mainCtrl', function($scope){
$scope.nodes = [
{
"id": "id of the concept model",
"name": "Curcumin",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Node 01",
"weight": "70",
"type": "text",
"node": [
{
"id": "group11",
"name": "Node 02",
"weight": "70",
"type": "structure",
"node": []
}
]
}
]
},
{
"id": "id of the concept model",
"name": "Abuse Resistent Technology",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Category 01",
"weight": "70",
"type": "text",
"node": []
}
]
},
{
"id": "id of the concept model",
"name": "PC in Aviation",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Industry",
"weight": "70",
"type": "text",
"node": [
{
"id": "group1",
"name": "Node 01",
"weight": "70",
"type": "text",
"node": []
}
]
}
]
}
];
});li{
list-style: none;
background-color:#334559;
color:#FFF;
padding:2px;
cursor: pointer;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
<script type="text/ng-template" id="treeNodes.html">
<ul>
<li ng-repeat="node in nodes" >
<div ng-click="node.expand = (node.expand?false:true);" ><i class="fa" ng-class="{'fa-caret-right':(node.node.length && !node.expand), 'fa-caret-down':(node.node.length && node.expand)}"></i> {{node.name}}</div>
<div ng-show="node.node.length && node.expand" ng-include=" 'treeNodes.html' " onload="nodes = node.node"></div>
</li>
</ul>
</script>
<div ng-include=" 'treeNodes.html'" style="overflow-y: auto;height: 55%;width: 300px;"></div>
</div>