<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="TreeCtrl">
<h3>A tree</h3>
<input type="search" placeholder = "Search Node" ng-model="searchElement"/>
<input type="button" value = "CollapseAll" ng-click="Collapse()" ng-model = "collapsedcanClick" ng-init="collapsedcanClick=false" ng-disabled = "!collapsedcanClick">{{collapsedcanClick}}{{active}}
<!-- <input type="button" value = "ExpandAll" ng-click="expand = !expand">{{expand}} -->
{{collapsedClicked}}
<script type="text/ng-template" id="node.html" ng-model="active">
<ul>
<li ng-repeat="node in tree | filter:searchElement" ng-click="node.active = !node.active;NodeClick()" >
<!--TODO at the root node collapse all button should be false<span ng-if = "!node.active" > {{$scope.collapsedcanClick = false}} </span> -->
{{node.name}}
<div ng-include="'node.html'" onload="tree = node.children | filter:searchElement" ng-click="node.active = !node.active" ng-show="node.active" ></div>
</li>
</ul>
</script>
<div ng-include="'node.html'"></div>
<!-- {{ tree | json }} -->
</body>
</html>
// Code goes here
(function() {
var app = angular.module("myApp", []);
var TreeCtrl = function($scope) {
$scope.tree = [
{ "name": "USD", "selected": false, "children": [
{ "name": "TRAD1", "selected": false, "children": [
{ "name": "FRA", "selected": false, "children": [] },
{ "name": "FX", "selected": false, "children": [] },
{ "name": "DL", "selected": false, "children": [] },
{ "name": "DL", "selected": false, "children": [] }
] }
] },
{ "name": "GBP", "selected": false, "children": [
{ "name": "TRAD2", "selected": false, "children": [
{ "name": "FRA", "selected": false, "children": [] }
] },
{ "name": "TRAD1", "selected": false, "children": [
{ "name": "FRA", "selected": false, "children": [] }
] }
] }
];
$scope.Collapse = function(){
$scope.node.active=false;
};
$scope.NodeClick = function(){
// $scope.node.active = !$scope.node.active;
$scope.collapsedcanClick = true;
console.log($scope.node);
console.log($scope.active);
};
};
app.controller("TreeCtrl",["$scope",TreeCtrl]);
// app.controller("EventController",["$scope",EventController]);
}());
/**
* Created by dhakande on 8/27/2014.
*/