Looking to create a dynamic treeview menu with angularJS? Wondering how to achieve the desired results using a controller ($scope.results) and JSON data? Check out the code snippet below for an example of how to structure your treeview:
<ul>
<li class="folder"><span>Pages</span>
<ul>
<li class="file"><span>page1</span></li>
<li class="file"><span>page2</span></li>
</ul>
</li>
<li class="folder"><span>TestSuites</span>
<ul>
<li class="file"><span>TestSuites1</span></li>
</ul>
</li>
</ul>
JSON data:
{
"result": [
{
"@type": "d",
"@rid": "#-2:1",
"@version": 0,
"name": "pg3"
},
{
"@type": "d",
"@rid": "#-2:2",
"@version": 0,
"name": "pg3"
},
{
"@type": "d",
"@rid": "#-2:3",
"@version": 0,
"name": "pg3"
}
],
"notification": "Query executed in 0.023 sec. Returned 3 record(s)"
}
Controller setup:
vController.controller('v-PagesController', [
'$scope',
'$q',
'vRESTService',
function($scope, $q, vRESTService) {
vRESTService.getPages().then(
function(results) {
$scope.results = results;
console.log(results);
},
function() {
console.log(Error);
});
}
]);