Menu
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": []
}
]
}
]
}
]
I have done something like this for two levels :
<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>
Is there a way to generalize this solution to any number of level??
669
NEST TWO ng-repeatThe first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection. By using one ng-repeat for the row and an other for the column, the rows and the columns of your table is now driven by a subset.
Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope. So what you need to do is reach up to the parent scope, and use that $index . Save this answer.
Definition and Usage The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With