<!doctype html>
|
<html>
|
<head>
|
<title>Angular Tree</title>
|
<script src="demo/jquery.2.0.3.js"></script>
|
<script src="demo/angular.1.2.29.js"></script>
|
<script src="demo/bootstrap.3.1.1.js"></script>
|
<script src="demo/ui-bootstrap-tpls.0.11.2.js"></script>
|
<script src="demo/prettify.1.0.1.js"></script>
|
|
<link href="demo/bootstrap.3.1.1.css" rel="stylesheet" type="text/css">
|
<link href="demo/prettify-style.css" rel="stylesheet" type="text/css">
|
|
<script src="angular-tree-control.js"></script>
|
<link rel="stylesheet" type="text/css" href="css/tree-control.css">
|
<link rel="stylesheet" type="text/css" href="css/tree-control-attribute.css">
|
<style>
|
.header{padding-top: 50px; padding-bottom:50px; background-color: #444980;}
|
.head-container{width: 1140px; margin:auto;}
|
.header h1 {color: #fffffa; font-size: 60px}
|
.header h2 {color: #fffffa; font-size: 24px; font-style: normal}
|
.example-caption {color: #bbb; font-size: 12px}
|
.docs-body{width: 1140px; margin: auto auto 50px; }
|
.docs-footer{background-color: #F5F5F5; text-align: center; padding: 30px 0; border-top: #e5e5e5}
|
.tab-pane{background-color: #f8f8f8; border-right: 1px solid #ccc;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px }
|
.nav li.active a{background-color: #f8f8f8}
|
pre.code {border:none; background-color: #f8f8f8; padding: 10px; margin: 0; font-family: Consolas, 'Liberation Mono', Courier, monospace;}
|
.docs-sidenav { margin-top: 45px; margin-bottom: 0; }
|
.docs-sidenav > li > a {display: block; font-size: 13px; font-weight: 500; color: #999; padding: 4px 20px;}
|
.docs-sidenav > li.active > a {font-weight: 700; color: #563d7c; border-left: 2px solid #563d7c;padding-left: 18px;}
|
.docs-sidenav > li > a:hover {background-color: transparent; color: #563d7c; border-left: 1px solid #563d7c;padding-left: 19px;}
|
.type-hint-object {background:#999;}
|
.type-hint-boolean {background:rgb(18, 131, 39);}
|
.type-hint-number {background:rgb(189, 63, 66);}
|
</style>
|
</head>
|
<body ng-app="example">
|
<a href="https://github.com/wix/angular-tree-control"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
|
<div class="header">
|
<div class="head-container">
|
<h1>Angular Tree</h1>
|
<h2>The AngularJS tree component</h2>
|
</div>
|
</div>
|
<div class="row docs-body">
|
<div class="col-md-9">
|
|
<section id="classic" ng-controller="Classic">
|
<div class="page-header">
|
<h1>Basic Usage <small>(Classic style, default configuration)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="classic-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
on-selection="showSelected(node)">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>Classic style of the tree control, set using the class <code>tree-classic</code>.</p>
|
<p>Click on the folder icons to open and close the tree nodes. Click on the node label to select a node in the tree. A Second click on the node label will unselect the node.</p>
|
<p>The tree data is set using the <code>tree-model</code> attribute, which accepts either a node object or an array of node objects.
|
A Node object is a regular javascript object which has a <code>children</code> array property (children is the defuault name,
|
it can be overridden using the tree options). </p>
|
<p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="classic-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="classic-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="classic-js">
|
function Classic($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.showSelected = function(sel) {
|
$scope.selectedNode = sel;
|
};
|
}
|
</script>
|
</section>
|
|
<section id="as-attribute" ng-controller="AsAttribute">
|
<div class="page-header">
|
<h1>As an Attribute <small>(Alternative to a Custom Element)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="as-attribute-html">
|
<div treecontrol class="tree-classic"
|
tree-model="treedata"
|
on-selection="showSelected(node)">
|
label: {{node.label}} ({{node.id}})
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>Using the tree control as an attribute is as easy as using a div and adding a <code>treecontrol</code> attribute to it</p>
|
<p>Note that you have to include the <code>tree-control-attribute.css</code> file instead of the <code>tree-control.css</code>
|
as the CSS selectors are quite different between the two styles of usage.</p>
|
<p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="as-attribute-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="as-attribute-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="as-attribute-js">
|
function AsAttribute($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.showSelected = function(sel) {
|
$scope.selectedNode = sel;
|
};
|
}
|
</script>
|
</section>
|
|
<section id="labels-template" ng-controller="LabelsTemplate">
|
<div class="page-header">
|
<h1>Tree Label Templates <small>(Customize the tree labels)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="labels-template-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
on-selection="showSelected(node)">
|
<span style="color: {{getColor(node)}}">{{node.label}} - index: {{$index}}</span>
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>Taking control of the tree labels is as simple as with <code>ng-repeat</code> - you include a template in the tree control tag.</p>
|
<p>Special properties are exposed to the local scope of each template, including the current node as <code>node</code>.</p>
|
<p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
|
</div>
|
</div>
|
<table class="table table-bordered table-striped">
|
<thead><tr><td>Variable</td><td>Type</td><td>Details</td></tr></thead>
|
<tr><td><code>node</code></td><td><span class="label type-hint-object">Object</span></td><td>The current node the label represents.</td></tr>
|
<tr><td><code>$parentNode</code></td><td><span class="label type-hint-object">Object</span></td><td>The parent of the current node.</td></tr>
|
<tr><td><code>$index</code></td><td><span class="label type-hint-number">number</span></td><td>iterator offset of the repeated element under one parent node(0..length-1).</td></tr>
|
<tr><td><code>$first</code></td><td><span class="label type-hint-boolean">boolean</span></td><td>true if the repeated element is first in the iterator.</td></tr>
|
<tr><td><code>$middle</code></td><td><span class="label type-hint-boolean">boolean</span></td><td>true if the repeated element is between the first and last in the iterator.</td></tr>
|
<tr><td><code>$last</code></td><td><span class="label type-hint-boolean">boolean</span></td><td>true if the repeated element is last in the iterator.</td></tr>
|
<tr><td><code>$odd</code></td><td><span class="label type-hint-boolean">boolean</span></td><td>true if the iterator position $index is even (otherwise false).</td></tr>
|
<tr><td><code>$even</code></td><td><span class="label type-hint-boolean">boolean</span></td><td>true if the iterator position $index is odd (otherwise false).</td></tr>
|
</table>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="labels-template-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="labels-template-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="labels-template-js">
|
function LabelsTemplate($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.getColor = function(node) {
|
return ["#a40", "#04a", "#990", "#0a4"][node.i % 4];
|
};
|
$scope.showSelected = function(sel) {
|
$scope.selectedNode = sel;
|
};
|
}
|
</script>
|
</section>
|
|
<section id="parent" ng-controller="Parent">
|
<div class="page-header">
|
<h1>Tree Label Scope <small>(as a child of the controller scope)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="classic-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
on-selection="showSelected(node)">
|
<button ng-click="buttonClick($event, node)">Click Me!</button> label: {{node.label}} ({{node.id}} ) {{$index}}
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>The scope used to compile the tree labels is a child scope of the controller (used to compile the tree-control directive).
|
As such, in the tree label scope you have access to all the properties and methods defined in the controller scope.
|
This example shows how to access a method in the parent scope from the label template.</p>
|
<p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
|
<p>Last clicked: <code>{{lastClicked ? lastClicked.label : "N/A"}}</code></p>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="classic-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="classic-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="classic-js">
|
function Parent($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.lastClicked = null;
|
$scope.buttonClick = function($event, node) {
|
$scope.lastClicked = node;
|
$event.stopPropagation();
|
}
|
$scope.showSelected = function(sel) {
|
$scope.selectedNode = sel;
|
};
|
}
|
</script>
|
</section>
|
|
<section id="changing" ng-controller="Changing">
|
<div class="page-header">
|
<h1>Changing the live tree <small>(adding and removing nodes)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="changing-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>You can modify the <code>tree-model</code> bound tree, and the tree will update with the new structure</p>
|
<p>For instance, adding nodes:</p>
|
<ul>
|
<li><a ng-click="addRoot()">Add a new root</a></li>
|
<li><a ng-click="addChildToSecondRoot()">Add a child to the 2nd node</a></li>
|
</ul>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="changing-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="changing-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="changing-js">
|
function Changing($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.addRoot = function() {
|
$scope.treedata.push({label: "New Root", id:"some id", children: []})
|
};
|
$scope.addChildToSecondRoot = function() {
|
$scope.treedata[1].children.push({label: "New Child", id:"some id", children: []})
|
};
|
}
|
</script>
|
</section>
|
|
<section id="selected" ng-controller="Selected">
|
<div class="page-header">
|
<h1>Selected Node Binding <small>(selected-node)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="selected-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
selected-node="selected">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>The <code>selected-node</code> attribute of <code>treecontrol</code> is bound to the currently selected node object of the tree.
|
Like any other Angular bound value, updating selected-node will set the tree selection, and clicking the tree (selecting a node) will
|
update back the selected-node.</p>
|
<p>Setting <code>selected-node</code> can also be used to set the default selected node of the tree.</p>
|
<p>Note that if using multiple selection, the selected nodes are bound to an Array property <code>selected-nodes</code> instead of <code>selected-node</code>.</p>
|
<p><a ng-click="selectNode(0)">select node 1</a><br>
|
<a ng-click="selectNode(1)">select node 2</a><br>
|
<a ng-click="selectNode(2)">select node 3</a><br>
|
<a ng-click="selectNode(3)">select node 4</a><br>
|
<a ng-click="clearSelected()">clear Selected</a></p>
|
<p>Selected node: <code>{{selected.label}}</code></p>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="selected-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="selected-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="selected-js">
|
function Selected($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.selected = $scope.treedata[2];
|
$scope.selectNode = function(num) {
|
$scope.selected = $scope.treedata[num];
|
};
|
$scope.clearSelected = function() {
|
$scope.selected = undefined;
|
}
|
}
|
</script>
|
</section>
|
|
<section id="expandedNodes" ng-controller="ExpandedNodes">
|
<div class="page-header">
|
<h1>Expanded Nodes Binding <small>(expanded-nodes)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="default-expanded-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
expanded-nodes="expandedNodes"
|
options="opts">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>The <code>expanded-nodes</code> attribute of <code>treecontrol</code> is bound to the currently selected node object of the tree.
|
Like any other Angular bound value, updating <code>expanded-nodes</code> will set the expanded nodes in the tree,
|
and expanding or contracting nodes in the tree will update the <code>expanded-nodes</code> property.</p>
|
<p>Setting <code>expanded-nodes</code> can also be used to set the default expanded nodes of the tree.</p>
|
<p><a ng-click="setExpanded()">Expand 2, 3 and 3.3 (only)</a></p>
|
<p>The currently expanded nodes:</p>
|
<ul>
|
<li ng-repeat="node in expandedNodes">{{node.label}}</li>
|
</ul>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="default-expanded-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="default-expanded-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="default-expanded-js">
|
function ExpandedNodes($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.expandedNodes = [$scope.treedata[1],
|
$scope.treedata[3],
|
$scope.treedata[3].children[2],
|
$scope.treedata[3].children[2].children[1]];
|
$scope.setExpanded = function() {
|
$scope.expandedNodes = [$scope.treedata[1],
|
$scope.treedata[2],
|
$scope.treedata[2].children[2]
|
];
|
};
|
}
|
</script>
|
</section>
|
|
<section id="events" ng-controller="Events">
|
<div class="page-header">
|
<h1>Events <small>(on-expand & on-selection)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="events-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
on-selection="showSelected(node, selected)"
|
on-node-toggle="showToggle(node, expanded)">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<P>The tree supports events for selection and expansion of nodes. The events are set using the <code>on-selection</code> and <code>on-node-toggle</code> attributes
|
which values are evaluated as angular expressions (like <code>ng-click</code> value). The expression can use the <code>node</code> and <code>selected</code> variables (for on-selection) or
|
the <code>node</code> and <code>expanded</code> variables (for on-node-toggle) for context of the clicked node and if it was selected / deselected or expanded / collapsed.</P>
|
<p>Note the events are fired only on the clicked node. If using the tree in single selection mode and one node is selected, when selecting a different node
|
only one on-selection event will be fired for the newly selected node. The old selected node will not be selected anymore without an on-selected event.</p>
|
<p>In order to prevent selection of branches (folders) in the tree, set the <code>options.dirSelectable</code> to <code>false</code>.
|
Clicking folder labels at this point will expand and contract the node.</p>
|
<p>Events fired:</p>
|
<ul id="events-listing">
|
|
</ul>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="events-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="events-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="events-js">
|
function Events($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.showToggle = function(node, expanded) {
|
$("#events-listing").append("<li>"+node.label+ (expanded?" expanded":" collapsed") + "</li>");
|
};
|
$scope.showSelected = function(node, selected) {
|
$("#events-listing").append("<li>"+node.label+ (selected?" selected":" deselected") + "</li>");
|
};
|
}
|
</script>
|
</section>
|
|
<section id="multi-selection" ng-controller="MultiSelection">
|
<div class="page-header">
|
<h1>Multi Selection <small>(options.multiSelect & selected-nodes)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="events-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
selected-nodes="selectedNodes"
|
on-selection="showSelected(node, selected)"
|
options="treeOptions">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<P>The tree control supports multi-selection using the <code>options.multiSelect</code> option and the <code>selected-nodes</code> attribute (instead of the <code>selected-node</code> attribute in single selection mode).
|
<code>selected-nodes</code> is expected to be an Array which will contain the selected nodes.
|
When using multi-selection, selecting a node adds it to the selected-nodes array and a second click remove it from the array.</p>
|
<div class="row">
|
<div class="col-md-6">
|
<p>Selected Nodes:</p>
|
<ul id="multi-selection-listing">
|
<li ng-repeat="node in selectedNodes">{{node.label}}</li>
|
</ul>
|
</div>
|
<div class="col-md-6">
|
<p>Selection Events:</p>
|
<ul id="multi-selection-events-listing">
|
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="events-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="events-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="multi-selection-js">
|
function MultiSelection($scope) {
|
$scope.treeOptions = {multiSelection: true};
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.selectedNodes = [];
|
$scope.showSelected = function(node, selected) {
|
$("#multi-selection-events-listing").append("<li>"+node.label+ (selected?" selected":" deselected") + "</li>");
|
};
|
}
|
</script>
|
</section>
|
|
|
<section id="dirSelection" ng-controller="DirSelection">
|
<div class="page-header">
|
<h1>Clicking Labels Expand & Collapse <small>(options.dirSelectable)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="dir-selection-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
options="opts"
|
on-selection="showSelected(node)">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>In order to prevent selection of branches (folders) in the tree, set the <code>options.dirSelectable</code> to <code>false</code>.
|
Clicking folder labels at this point will expand and contract the node.</p>
|
<p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="dir-selection-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="dir-selection-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="dir-selection-js">
|
function DirSelection($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.opts = {
|
dirSelectable: false
|
};
|
$scope.showSelected = function(sel) {
|
$scope.selectedNode = sel;
|
};
|
}
|
</script>
|
</section>
|
|
<section id="light" ng-controller="Light">
|
<div class="page-header">
|
<h1>Light Style <small>(Basic style, default configuration)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="light-html">
|
<treecontrol class="tree-light"
|
tree-model="treedata"
|
on-selection="showSelected(node)">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>Light style of the tree control, set using the class <code>tree-light</code>.</p>
|
<p>Click on the folder icons to open and close the tree nodes. Click on the node label to select a node in the tree.</p>
|
<p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="light-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="light-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="light-js">
|
function Light($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.showSelected = function(sel) {
|
$scope.selectedNode = sel;
|
};
|
}
|
</script>
|
</section>
|
|
<section id="dark" ng-controller="Dark">
|
<div class="page-header">
|
<h1>Dark Style <small>(Basic style, default configuration)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body" style="background-color: #555;">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="dark-html">
|
<!-- Note that the tree does not set the background color. We inject it from the wrapper div. -->
|
<div style="background-color: #555;">
|
<treecontrol class="tree-dark"
|
tree-model="treedata"
|
on-selection="showSelected(node)">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>Dark style of the tree control, set using the class <code>tree-dark</code>. The style does not include the background color, instead,
|
inject your own background color using a wrapper div element.</p>
|
<p>Click on the folder icons to open and close the tree nodes. Click on the node label to select a node in the tree.</p>
|
<p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="dark-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="dark-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="dark-js">
|
function Dark($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.showSelected = function(sel) {
|
$scope.selectedNode = sel;
|
};
|
}
|
</script>
|
</section>
|
|
<section id="custom-css" ng-controller="CustomCss">
|
<div class="page-header">
|
<h1>Custom Css Classes <small>(options.injectClasses)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="custom-css-html">
|
<style>
|
.c-ul {border: 1px solid #abcdef;}
|
.c-li {background-color: #defacb}
|
.c-liSelected {background-color: #fedbca}
|
.c-iExpanded {border: 1px solid #77a}
|
.c-iCollapsed {border: 1px solid #7c7}
|
.c-iLeaf {border: 1px solid #a77}
|
treecontrol.tree-classic li .tree-label.c-label {color: #44c}
|
treecontrol.tree-classic li .tree-selected.c-labelSelected {background-color: yellow}
|
</style>
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
options="opts">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>The <code>options.injectClasses</code> option allows to add custom CSS classes on the tree DOM. The selected classes are</p>
|
<ul>
|
<li><code>ul</code> - inject classes into the ul elements (branch elements)</li>
|
<li><code>li</code> - inject classes into the li elements (both branch and leaf elements)</li>
|
<li><code>liSelected</code> - inject classes into the li elements of the selected node</li>
|
<li><code>iExpanded</code> - inject classes into the 'i' element for the expanded nodes (the icon)</li>
|
<li><code>iCollapsed</code> - inject classes into the 'i' element for the collapsed nodes</li>
|
<li><code>iLeaf</code> - inject classes into the 'i' element for leaf nodes</li>
|
<li><code>label</code> - inject classes into the div element around the label</li>
|
<li><code>labelSelected</code> - inject classes into the div element around the label only when the node is selected</li>
|
</ul>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="custom-css-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="custom-css-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="custom-css-js">
|
function CustomCss($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.opts = {
|
injectClasses: {
|
"ul": "c-ul",
|
"li": "c-li",
|
"liSelected": "c-liSelected",
|
"iExpanded": "c-iExpanded",
|
"iCollapsed": "c-iCollapsed",
|
"iLeaf": "c-iLeaf",
|
"label": "c-label",
|
"labelSelected": "c-labelSelected"
|
}
|
};
|
}
|
</script>
|
</section>
|
|
<section id="children" ng-controller="Children">
|
<div class="page-header">
|
<h1>Custom Children <small>(options.nodeChildren)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="children-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
options="opts">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>Angular tree control assumes that the tree nodes have a <code>children</code> array property for the children of the node.
|
You can override the children property name using the tree <code>nodeChildren</code> property of the tree options.</p>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="children-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="children-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="children-js">
|
function Children($scope) {
|
$scope.treedata=[
|
{id:"id1", label: "Node 1", links: [
|
{id:"id1.1", label: "Node 1.1", links: {}},
|
{id:"id1.2", label: "Node 1.1", links: {}}
|
]},
|
{id:"id2", label: "Node 2", links: []},
|
{id:"id3", label: "Node 3", links: []},
|
{id:"id4", label: "Node 4", links: []}
|
];
|
$scope.opts = {
|
nodeChildren: "links"
|
};
|
}
|
</script>
|
</section>
|
|
<section id="isleaf" ng-controller="Isleaf">
|
<div class="page-header">
|
<h1>Custom Branch / Leaf <small>(options.isLeaf)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="isleaf-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
options="opts">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>the <code>isLeaf</code> option allows taking control of the selection if a node is a branch (folder) or a leaf (File).
|
This method returns a boolean, where <code>true</code> indicates a leaf, <code>false</code> indicates a branch.</p>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="isleaf-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="isleaf-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="isleaf-js">
|
function Isleaf($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.opts = {
|
isLeaf: function(node) {
|
return node.i % 2 == 0;
|
}
|
};
|
}
|
</script>
|
</section>
|
|
<section id="sorting" ng-controller="Sorting">
|
<div class="page-header">
|
<h1>Sorting tree nodes <small>(order-by, reserve-order)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="sorting-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
order-by="label"
|
reverse-order="{{reverse}}">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>The <code>order-by</code> and <code>reverse-order</code> properties allows controlling the sorting of the tree nodes.
|
The value of those attributes is used with the <code>ng-repeat</code> orderBy filter -
|
see more details at the <a href="https://code.angularjs.org/1.2.0-rc.3/docs/api/ng.filter:orderBy">Angular JS orderBy</a> docs.</p>
|
<p>The sorting is done for each branch individually (sorting does not change the stucture of the tree itself).</p>
|
<input type="checkbox" ng-model="reverse"/> Reverse Order
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="sorting-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="sorting-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="sorting-js">
|
function Sorting($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.reverse = true;
|
}
|
</script>
|
</section>
|
|
|
<section id="filtering" ng-controller="Filtering">
|
<div class="page-header">
|
<h1>Filtering tree nodes <small>(filter-expression, filter-comparator)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="filtering-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
filter-expression="predicate"
|
filter-comparator="comparator">
|
label: {{node.label}} ({{node.id}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>The <code>filter-expression</code> and <code>filter-comparator</code> properties allows filtering the nodes of the tree.
|
The value of those attributes is used with the <code>ng-repeat</code> Filter filter -
|
see more details at the <a href="https://code.angularjs.org/1.2.25/docs/api/ng/filter/filter">Angular JS Filter</a> docs.</p>
|
<p>The filter is done for each branch individually.</p>
|
<p>The filter expression (predicate) is used for selecting nodes from the tree to display.
|
It can be a string, object or a function. If a string, it is used to match values of the node properties.
|
If an object, each property of the expression object is used to match values of the node properties with the same name.
|
A function can be used to write arbitrary filters, and will be invoked for each node of the tree.</p>
|
<p>The filter comparator is used in determining if the expected value (from the filter expression) and actual value (from the object in the array) should be considered a match.
|
If false, it looks for substring match in a case insensitive way (the default).
|
If true, it looks for exact match.
|
If a function, the function will be given the object value and the predicate value to compare and should return true if the item should be included in filtered result.</p>
|
<input type="text" ng-model="predicate"/> Filter expression (string)<br>
|
<input type="checkbox" ng-model="comparator"/> Filter comparator (true or false)
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="filtering-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="filtering-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="filtering-js">
|
function Filtering($scope) {
|
$scope.treedata=createSubTree(3, 4, "");
|
$scope.predicate = "Node 1";
|
$scope.comparator = false;
|
}
|
</script>
|
</section>
|
<section id="equality" ng-controller="Equality">
|
<div class="page-header">
|
<h1>Custom Equality <small>(options.equality)</small></h1>
|
</div>
|
<div class="row">
|
<div class="col-md-6 show-grid">
|
<div class="panel panel-default">
|
<div class="panel-body">
|
<div class="example-caption">EXAMPLE:</div>
|
<div save-content="equality-html">
|
<treecontrol class="tree-classic"
|
tree-model="treedata"
|
options="opts">
|
label: {{node.name}} ({{node.age}})
|
</treecontrol>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<p>The angular tree control is using an equality function to determine if two nodes are equal,
|
The build it function checks for equality of the node members, ignoring the children property.</p>
|
<p>In some cases, it is required to replace the equality function. Some examples include</p>
|
<ul>
|
<li>If multiple nodes exist in the three that are identical except for their parents and children, the default function
|
will confuse between them. In such as case, it is recommended to replace the function with the === operator (as in this example).</li>
|
<li>If you have an id property for nodes that can be relayed on for node uniqueness and identification,
|
using a custom equality function that checks for that id will result in better performance.</li>
|
</ul>
|
</div>
|
</div>
|
<div class="row">
|
<tabset>
|
<tab heading="Markup" >
|
<pre class="code" apply-content="equality-html" highlight-lang="html"></pre>
|
</tab>
|
<tab heading="JavaScript">
|
<pre class="code" apply-content="equality-js" highlight-lang="js"></pre>
|
</tab>
|
</tabset>
|
</div>
|
<script save-content="equality-js">
|
function Equality($scope) {
|
$scope.treedata=[
|
{ "name" : "Joe", "age" : "21", "children" : [
|
{ "name" : "Smith", "age" : "42", "children" : [] },
|
{ "name" : "Joe", "age" : "21", "children" : [
|
{ "name" : "Jenifer", "age" : "23", "children" : [
|
{ "name" : "Dani", "age" : "32", "children" : [] },
|
{ "name" : "Max", "age" : "34", "children" : [] }
|
]}
|
]}
|
]},
|
{ "name" : "Albert", "age" : "33", "children" : [] },
|
{ "name" : "Ron", "age" : "29", "children" : [] }
|
];
|
$scope.opts = {
|
equality: function(node1, node2) {
|
return node1 === node2;
|
}
|
}
|
}
|
</script>
|
</section>
|
|
</div>
|
<div class="col-md-3">
|
<ul nav class="nav docs-sidenav">
|
<!--<li class="active"><a href="#as-attribute">classic</a></li>-->
|
</ul>
|
</div>
|
|
</div>
|
<footer class="docs-footer">
|
<p>Designed and built by <a href="http://wix.com">Wix.com</a> team.</p>
|
<p>Code licensed under <a href="https://github.com/angular-ui/bootstrap/blob/master/LICENSE">MIT License</a>.</p>
|
<p>Checkout Wix developer resources <a href="http://dev.wix.com">dev.wix.com</a> and <a href="http://wix.io">wix.io</a>.</p>
|
</footer>
|
|
<script>
|
var entityMap = {
|
"&": "&",
|
"<": "<",
|
">": ">",
|
'"': '"',
|
"'": ''',
|
"/": '/'
|
};
|
function escapeHtml(string) {
|
return String(string).replace(/[&<>"'\/]/g, function (s) {
|
return entityMap[s];
|
});
|
}
|
var nonSpace = /\S/;
|
function trimIndent(content) {
|
var lines = content.split("\n");
|
var begin = 0;
|
var end = lines.length-1;
|
while ((nonSpace.exec(lines[begin]) == null) && (begin < lines.length))
|
begin = begin + 1;
|
while ((nonSpace.exec(lines[end]) == null) && end >= begin)
|
end = end - 1;
|
var ident = nonSpace.exec(lines[begin]).index;
|
var formatted = "";
|
for (var i = begin; i <= end; i++) {
|
formatted = formatted + lines[i].slice(ident-1) + ((i < end)?"\n":"");
|
}
|
return formatted;
|
}
|
var example = angular.module("example", ["treeControl", "ui.bootstrap", "template/tabs/tab.html", "template/tabs/tabset.html"])
|
.factory("$savedContent", function() {
|
return [];
|
})
|
.directive("saveContent", function($savedContent) {
|
return {
|
restrict: "A",
|
compile: function($element, $attrs) {
|
var content = $element.html();
|
$savedContent[$attrs.saveContent] = content;
|
}
|
}
|
})
|
.directive("applyContent", function($savedContent) {
|
return {
|
restrict: "EAC",
|
compile: function($element, $attrs) {
|
return function($scope, $element, $attrs) {
|
var content = $savedContent[$attrs.applyContent];
|
var lang = $attrs.highlightLang;
|
if (lang == "html")
|
content = escapeHtml(content);
|
content = trimIndent(content);
|
var pre = prettyPrintOne(content, lang);
|
$element.html(pre);
|
}
|
}
|
}
|
})
|
.directive("nav", function() {
|
return {
|
restrict: "A",
|
compile: function($element) {
|
var sections = $("section");
|
angular.forEach(sections, function(section) {
|
var $section = $(section);
|
var id = $section.attr('id');
|
var titleHtml = $section.find("h1").html();
|
titleHtml = titleHtml.slice(0, titleHtml.indexOf("<")).trim();
|
$element.append("<li><a href='#"+id+"'>"+titleHtml+"</a></li>")
|
})
|
}
|
}
|
})
|
;
|
function createSubTree(level, width, prefix) {
|
if (level > 0) {
|
var res = [];
|
for (var i=1; i <= width; i++)
|
res.push({ "label" : "Node " + prefix + i, "id" : "id"+prefix + i, "i": i, "children": createSubTree(level-1, width, prefix + i +".") });
|
return res;
|
}
|
else
|
return [];
|
}
|
</script>
|
|
</body>
|
</html>
|
