AngularJS - Tree/Nav Render
http://angularjs.org/
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/ng-template" id="tree_item_renderer.html">
{{data.name}}
<ul ng-show="data.show">
<li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
</ul>
</script>
<div ng-app="Application" ng-controller="TreeController" ng-cloak>
<div class="input-append">
<input class="span2" ng-model="search" id="inputIcon" type="text" />
<span class="add-on"><i class="icon-search"></i></span>
</div>
<div>
<strong ng-show="search.length > 0">Matching results: {{ (displayTree|filter:search).length }}</strong>
<ul>
<li ng-repeat="data in displayTree | filter:search" ng-include="'tree_item_renderer.html'"></li>
</ul>
</div>
<sub>displayTree JSON : <br /></sub>
<pre>{{ displayTree | json | filter:search }}</pre>
</div>
CSS
body {
padding: 30px;
}
TypeScript
angular.module("myApp", []).
controller("TreeController", ['$scope', function ($scope) {
// http://www.jsonmate.com/permalink/71a30dd682d0aac7eb0367b49c049730
$scope.fullTree = [{
"name": "Node",
"show": true,
"nodes": [{
"name": "Node-1",
"show": true,
"nodes": [{
"name": "Node-1-1",
"show": true,
"nodes": []
}, {
"name": "Node-1-2",
"show": true,
"nodes": []
}, {
"name": "Node-1-3",
"show": true,
"nodes": []
}]
}, {
"name": "Node-2",
"show": true,
"nodes": [{
"name": "Node-2-1",
"show": true,
"nodes": [{
"name": "Node-2-1-1",
"show": true,
"nodes": []
}, {
"name": "Node-2-1-2-ggg",
"show": true,
"nodes": []
}]
}]
}, {
"name": "Node-3",
"show": true,
"nodes": []
}, {
"name": "Node-4",
"show": true,
"nodes": []
}]
}];
$scope.displayTree = $scope.fullTree;
$scope.flattenedTree = [];
$scope.search = "";
$scope.$watch('search', function (val) {
if ($scope.flattenedTree.length === 0) {
flattenJsonArray($scope.fullTree, $scope.flattenedTree, "nodes", ["show", "nodes"]);
}
$scope.displayTree = val.length > 0 ? $scope.flattenedTree : $scope.fullTree;
});
}]);
// Flattens an array using recursion.
function flattenJsonArray(originalArray, flattenedArray, propertyArrayName, propertiesToRemoveArray) {
if (!originalArray) return;
...