<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<script data-require="angular-animate@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular-animate.js"></script>
<script src="angular-recursion.min.js"></script>
<script src="angular-tree-widget.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="angular-tree-widget.min.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Check node programmatically</h1>
<div ng-controller="TestController as vm">
<p>
<tree nodes="vm.tree.treeNodes" options="vm.tree.options"></tree>
</p>
<p>
<button type="button" ng-click="vm.selectNode()">Select Node</button>
</p>
<p>
<div ng-repeat="node in vm.status.selectedNode">
Selected node: <strong>{{node.name}}</strong>
<i ng-class="{'tree-node-ico': node.image}" ng-style="node.image && {'background-image':'url('+node.image+')'}"></i>
</div>
</p>
</div>
</body>
</html>
// Code goes here
(function () {
'use strict';
angular.module('app', ['TreeWidget']);
angular.module('app').controller('TestController', TestController);
function TestController() {
var vm = this;
var movSelected = {
name: 'Movies', selected: true,
children: [
{ name: 'Gladiator'},
{ name: 'The Shawshank Redemption'},
]
};
vm.status = {
selectedNode: [movSelected]
};
vm.tree = {
treeNodes : [{
name: 'My Files',
children: [
{
name: 'Music',
children: [{
name: 'Rock',
children: [
{ name: 'The Eagles - Hotel California'},
{ name: 'Ozzy Osbourne - Dreamer'}
]
},
{
name: 'Jazz',
children: [
{ name: 'Ray Charles - Hit the road Jack! '},
{ name: 'Louis Prima - Just A Gigolo'}
]
}]
},
movSelected,
{
name: 'Photos',
children: [
{
name: 'Sea',
children: [
{ name: 'image 1.jpg'},
{ name: 'image 4.png'}
]
},
{
name: 'Mountains',
children: [
{ name: 'image 1.jpg'}
]
}
]
},
{
name: 'My Files',
children: [{
name: 'Angular books',
children: [
{ name: 'Pro AngularJS'},
{ name: 'AngularJS: Up and Running'},
]
}, {
name: 'Work',
children: [
{ name: 'Lost presentation', disabled: true },
{ name: 'Requirements'},
{ name: 'TODO list' },
{ name: 'Finances'},
]
},
]
}
]
}],
options : {
showIcon : true,
multipleSelect: true,
onSelectNode : function (node) {
vm.status.selectedNode = node;
}
}
};
vm.selectNode = selectNode;
activate();
function activate() {
console.log('Activated');
}
function selectNode() {
var node = vm.tree.treeNodes[0];
if (node.selected) {
for (var i = 0; i < vm.status.selectedNode.length; i++) {
if (vm.status.selectedNode[i].name && vm.status.selectedNode[i].name === node.name) {
vm.status.selectedNode.splice(i,1);
}
}
} else {
vm.status.selectedNode.push(node);
}
node.selected = !node.selected;
}
}
})();
/* Styles go here */
/*
@license Angular TreeWidget version 1.0.1
ⓒ 2016 Alex Suleap https://github.com/AlexSuleap/agular-tree-widget
License: MIT
*/
!function(e){"use strict";e.module("TreeWidget",["ngAnimate","RecursionHelper"]).directive("tree",function(){return{restrict:"E",scope:{nodes:"=",options:"=?"},template:"<treenode nodes='nodes' tree='nodelist' options='options'></treenode>",compile:function(e,n,o){return{pre:function(e){function n(o,t){if(void 0!=o&&o.length>0)for(var d=0;d<o.length;d++){var i=o[d];void 0===i.nodeId&&(i.nodeId="tree-node-"+e.count,e.count++),void 0===i.expanded&&void 0!=i.children&&(i.expanded=!0),void 0!=t&&(i.parentId=t.nodeId),-1==e.nodelist.indexOf(i)&&e.nodelist.push(i),n(i.children,i)}}e.nodelist=[],e.options=e.options||(e.options={showIcon:!0,expandOnClick:!1,multipleSelect:!1}),e.count=0,e.$watch(function(){n(e.nodes)})}}}}}).filter("nodeFilter",["$filter",function(n){return function(o,t){var d=function(o,t){var i=[];return e.forEach(o,function(o){if(n("filter")([o],t).length>0)i.push(o);else if(e.isArray(o.children)&&o.children.length>0){var l=d(o.children,t);l.length>0&&i.push(o)}}),i};return d(o,t)}}]).directive("treenode",["RecursionHelper",function(n){return{restrict:"E",scope:{nodes:"=",tree:"=",options:"=?"},template:'<ul><li ng-repeat="node in nodes | nodeFilter:options.filter" class="node"><i class="tree-node-ico pointer" ng-class="{\'tree-node-expanded\': node.expanded && (node.children | nodeFilter:options.filter).length > 0,\'tree-node-collapsed\':!node.expanded && (node.children | nodeFilter:options.filter).length > 0}" ng-click="toggleNode(node)"></i><span class="node-title pointer" ng-click="selectNode(node, $event)" ng-class="{\'disabled\':node.disabled}"><span><i class="tree-node-ico" ng-if="options.showIcon" ng-class="{\'tree-node-image\':node.children, \'tree-node-leaf\':!node.children}" ng-style="node.image && {\'background-image\':\'url(\'+node.image+\')\'}"></i><span class="node-name" ng-class="{selected: node.selected&& !node.disabled}">{{node.name}}</span></span></span><treenode ng-if="node.children" nodes=\'node.children\' tree="tree" options="options" ng-show="node.expanded" id="{{node.nodeId}}"></treenode></li></ul>',compile:function(o){return n.compile(o,function(n,o,t,d,i){function l(o){e.forEach(n.tree,function(e){o!=e&&(e.selected=!1)})}function s(){return n.tree.filter(function(e){return e.selected})}n.selectNode=function(e,o){if(!e.disabled){var t;n.options.multipleSelect===!0?(e.selected=!e.selected,t=s()):"ctrlKey"===n.options.multipleSelect||"altKey"===n.options.multipleSelect?(o[n.options.multipleSelect]?e.selected=!e.selected:(e.selected=!0,l(e)),t=s()):(e.selected=!0,l(e),t=e),n.$emit("selection-changed",t),n.options.onSelectNode&&n.options.onSelectNode(t),n.options.expandOnClick&&void 0!=e.children&&(e.expanded=!e.expanded,n.$emit("expanded-state-changed",e),n.options.onExpandNode&&n.options.onExpandNode(e))}},n.toggleNode=function(e){void 0!=e.children&&(e.expanded=!e.expanded,n.$emit("expanded-state-changed",e),n.options.onExpandNode&&n.options.onExpandNode(e))}})}}}])}(angular);
span>.tree-node-ico,treenode ul li{margin-right:5px}tree{white-space:nowrap}treenode ul{list-style-type:none;-webkit-padding-start:16px;padding-left:16px;margin-bottom:0}treenode .pointer{cursor:pointer}treenode .selected{background:#BEEBFF;border-radius:2px;box-shadow:0 0 1px #999 inset}treenode .disabled{color:#a9a9a9;cursor:not-allowed}.tree-node-ico:empty{display:inline-block;width:16px;height:16px;background:50% 50% no-repeat;background-size:contain}.tree-node-ico.tree-node-expanded{background-image:url(https://alexsuleap.github.io/dist/img/arrow-down.png)}.tree-node-ico.tree-node-collapsed{background-image:url(https://alexsuleap.github.io/dist/img/arrow-right.png)}span>.tree-node-ico.tree-node-image{background-image:url(https://alexsuleap.github.io/dist/img/folder-open.png)}span>.tree-node-ico.tree-node-leaf{background-image:url(https://alexsuleap.github.io/dist/img/file.png)}treenode{opacity:1;max-height:2000px;overflow:hidden}treenode.ng-hide-add,treenode.ng-hide-remove{-webkit-transition:all linear .5s;-moz-transition:all linear .5s;-o-transition:all linear .5s;transition:all linear .5s;display:block!important}treenode.ng-hide{opacity:0;max-height:0}
angular.module("RecursionHelper",[]).factory("RecursionHelper",["$compile",function(n){return{compile:function(e,o){angular.isFunction(o)&&(o={post:o});var r,p=e.contents().remove();return{pre:o&&o.pre?o.pre:null,post:function(e,t){r||(r=n(p)),r(e,function(n){t.append(n)}),o&&o.post&&o.post.apply(null,arguments)}}}}}]);