<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<h1>Angular Recursive Tree</h1>
<h3>Basic and Simple Tree without "css styling"</h3>
<p>It is a example based on web references. | <strong>Required Level: Angularjs basic / intermedio</strong></p>
<div class="alert alert-danger">
<strong>If you don't see the tree, please: <button onClick="location.reload();">Reload</button></strong>
</div>
<!-- Logical TREE start here-->
<script type="text/ng-template" id="tree_item.html">
<div>
<button ng-click="toggleChildren(data)">
<span ng-bind="data.name"></span>
<span class="icon-plus" ng-class="data.iconDisplay"></span>
</button>
</div>
<div id="expanded-data" ng-if="data.childrenVisible">
<div id="nested-rowchild">
<div ng-repeat="data in data.nodes" ng-include="'tree_item.html'"></div>
</div>
</div>
</script>
<!-- recursive template tree -->
<div class="tree-template">
<div class="inner-template" ng-repeat="data in treeData" ng-include="'tree_item.html'"></div>
</div>
<!--uncomment to display data dummy-->
<!--<br><pre> {{treeData | json}} </pre>-->
<div class="panel">
<h5>Web references:</h5>
<ul>
<li>youtube - AngularJS: Create A Hierarchy Using Recursive Templates & ng-include</li>
<li>gurustop.net - /blog/2014/07/15/angularjs-using-templates-ng-include-create-infinite-tree</li>
<li>tech.theplayhub.com - /angularjs__expandable_recursive_tree_table/</li>
</ul>
</div>
</div>
.inner-template {
padding:10px;
}
#expanded-data {
margin-left:30px;
}
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
//dummy data
$scope.treeData = [{"name":"Parent Node 0",
"nodes":[{
"name":"Node-1",
"value" : "Value of Node 1",
"nodes":[{
"name":"Node-1-1",
"nodes":[]
},{
"name":"Node-1-2",
"nodes":[]
}]
},{
"name":"Node-2",
"value" : "Value of Node 2",
"nodes":[{
"name":"Node-2-1",
"nodes":[]
},{
"name":"Node-2-2",
"nodes":[]
}]
},{
"name":"Node-3",
"value" : "Value of Node 3",
"nodes":[{
"name":"Node-3-1",
"nodes":[{
"name":"Node-3-1-1",
"nodes":[]
},{
"name":"Node-3-1-2",
"nodes":[]
}]
},{
"name":"Node-3-2",
"nodes":[]
}]
}]
},{"name":"Parent Node 0.1",
"nodes":[{
"name":"Node-1",
"value" : "Value of Node 1",
"nodes":[{
"name":"Node-1-1",
"nodes":[]
},{
"name":"Node-1-2",
"nodes":[]
}]
},{
"name":"Node-2",
"value" : "Value of Node 2",
"nodes":[{
"name":"Node-2-1",
"nodes":[]
},{
"name":"Node-2-2",
"nodes":[]
}]
}]
}];
//----API REST USE LOCAL to test
// var URLexternal = 'https://restcountries.eu/rest/v1/all';
// var URLlocal = '/dummy_data/treesamp.json';
$scope.sampdata = '';
$scope.treedata = '';
//======= Local dummy json data TREE
// $http.get(URLlocal)
// .success(function(data){
// console.log(data);
// $scope.treedata = data;
// });
//======= external dummy json data
// $http.get(URLexternal)
// .success(function(dataexternal){
// console.log(dataexternal);
// $scope.sampdata = dataexternal;
// });
//
// //toogle tree levels indicator icon collpase or uncollapse
$scope.toggleChildren = function(datago) {
datago.childrenVisible = !datago.childrenVisible;
datago.iconDisplay = datago.childrenVisible ? "icon-plus" : "icon-minus";
};
}); //end app controller
