Skip to content

Commit a28205a

Browse files
yoavaayoavaa
committed
reordering, docs reformatting
1 parent 43922b4 commit a28205a

File tree

1 file changed

+67
-68
lines changed

1 file changed

+67
-68
lines changed

‎demo/demo.html‎

Lines changed: 67 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ <h1>As an Attribute <small>(Alternative to a Custom Element)</small></h1>
111111
<div class="col-md-6">
112112
<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>
113113
<p>Note that you have to include the <code>tree-control-attribute.css</code> file instead of the <code>tree-control.css</code>
114-
as the CSS selectors are quite different between the two styles of using the tree control.</p>
114+
as the CSS selectors are quite different between the two styles of usage.</p>
115115
<p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
116116
</div>
117117
</div>
@@ -262,10 +262,10 @@ <h1>Selected Node Binding <small>(selected-node)</small></h1>
262262
Like any other Angular bound value, updating selected-node will set the tree selection, and clicking the tree (selecting a node) will
263263
update back the selected-node.</p>
264264
<p>Setting <code>selected-node</code> can also be used to set the default selected node of the tree.</p>
265-
<a ng-click="selectNode(0)">select node 1</a>
266-
<a ng-click="selectNode(1)">select node 2</a>
267-
<a ng-click="selectNode(2)">select node 3</a>
268-
<a ng-click="selectNode(3)">select node 4</a>
265+
<p><a ng-click="selectNode(0)">select node 1</a><br>
266+
<a ng-click="selectNode(1)">select node 2</a><br>
267+
<a ng-click="selectNode(2)">select node 3</a><br>
268+
<a ng-click="selectNode(3)">select node 4</a></p>
269269
<p>Selected node: <code>{{selected.label}}</code></p>
270270
</div>
271271
</div>
@@ -293,6 +293,68 @@ <h1>Selected Node Binding <small>(selected-node)</small></h1>
293293
</script>
294294
</section>
295295

296+
<section id="expandedNodes" ng-controller="ExpandedNodes">
297+
<div class="page-header">
298+
<h1>Expanded Nodes Binding <small>(expanded-nodes)</small></h1>
299+
</div>
300+
<div class="row">
301+
<div class="col-md-6 show-grid">
302+
<div class="panel panel-default">
303+
<div class="panel-body">
304+
<div class="example-caption">EXAMPLE:</div>
305+
<div save-content="default-expanded-html">
306+
<treecontrol class="tree-classic"
307+
tree-model="treedata"
308+
expanded-nodes="expandedNodes"
309+
options="opts">
310+
label: {{node.label}} ({{node.id}})
311+
</treecontrol>
312+
</div>
313+
</div>
314+
</div>
315+
</div>
316+
<div class="col-md-6">
317+
<p>The <code>expanded-nodes</code> attribute of <code>treecontrol</code> is bound to the currently selected node object of the tree.
318+
Like any other Angular bound value, updating <code>expanded-nodes</code> will set the expanded nodes in the tree,
319+
and expanding or contracting nodes in the tree will update the <code>expanded-nodes</code> property.</p>
320+
<p>Setting <code>expanded-nodes</code> can also be used to set the default expanded nodes of the tree.</p>
321+
<p><a ng-click="setExpanded()">Expand 2, 3 and 3.3 (only)</a></p>
322+
<p>The currently expanded nodes:</p>
323+
<ul>
324+
<li ng-repeat="node in expandedNodes">{{node.label}}</li>
325+
</ul>
326+
</div>
327+
</div>
328+
<div class="row">
329+
<tabset>
330+
<tab heading="Markup" >
331+
<pre class="code" apply-content="default-expanded-html" highlight-lang="html"></pre>
332+
</tab>
333+
<tab heading="JavaScript">
334+
<pre class="code" apply-content="default-expanded-js" highlight-lang="js"></pre>
335+
</tab>
336+
</tabset>
337+
</div>
338+
<script save-content="default-expanded-js">
339+
function ExpandedNodes($scope) {
340+
$scope.treedata=createSubTree(3, 4, "");
341+
342+
$scope.expandedNodes = [$scope.treedata[1],
343+
$scope.treedata[3],
344+
$scope.treedata[3].children[2],
345+
$scope.treedata[3].children[2].children[1]];
346+
347+
$scope.setExpanded = function() {
348+
$scope.expandedNodes = [$scope.treedata[1],
349+
$scope.treedata[2],
350+
$scope.treedata[2].children[2]
351+
];
352+
};
353+
354+
}
355+
</script>
356+
</section>
357+
296358
<section id="events" ng-controller="Events">
297359
<div class="page-header">
298360
<h1>Events <small>(on-expand & on-selection)</small></h1>
@@ -568,68 +630,6 @@ <h1>Custom Css Classes <small>(options.injectClasses)</small></h1>
568630
</script>
569631
</section>
570632

571-
<section id="defaultExpanded" ng-controller="DefaultExpanded">
572-
<div class="page-header">
573-
<h1>Expanded Nodes Binding <small>(expanded-nodes)</small></h1>
574-
</div>
575-
<div class="row">
576-
<div class="col-md-6 show-grid">
577-
<div class="panel panel-default">
578-
<div class="panel-body">
579-
<div class="example-caption">EXAMPLE:</div>
580-
<div save-content="default-expanded-html">
581-
<treecontrol class="tree-classic"
582-
tree-model="treedata"
583-
expanded-nodes="expandedNodes"
584-
options="opts">
585-
label: {{node.label}} ({{node.id}})
586-
</treecontrol>
587-
</div>
588-
</div>
589-
</div>
590-
</div>
591-
<div class="col-md-6">
592-
<p>The <code>expanded-nodes</code> attribute of <code>treecontrol</code> is bound to the currently selected node object of the tree.
593-
Like any other Angular bound value, updating <code>expanded-nodes</code> will set the expanded nodes in the tree,
594-
and expanding or contracting nodes in the tree will update the <code>expanded-nodes</code> property.</p>
595-
<p>Setting <code>expanded-nodes</code> can also be used to set the default expanded nodes of the tree.</p>
596-
<p><a ng-click="setExpanded()">Expand 2, 3 and 3.3 (only)</a></p>
597-
<p>The currently expanded nodes:</p>
598-
<ul>
599-
<li ng-repeat="node in expandedNodes">{{node.label}}</li>
600-
</ul>
601-
</div>
602-
</div>
603-
<div class="row">
604-
<tabset>
605-
<tab heading="Markup" >
606-
<pre class="code" apply-content="default-expanded-html" highlight-lang="html"></pre>
607-
</tab>
608-
<tab heading="JavaScript">
609-
<pre class="code" apply-content="default-expanded-js" highlight-lang="js"></pre>
610-
</tab>
611-
</tabset>
612-
</div>
613-
<script save-content="default-expanded-js">
614-
function DefaultExpanded($scope) {
615-
$scope.treedata=createSubTree(3, 4, "");
616-
617-
$scope.expandedNodes = [$scope.treedata[1],
618-
$scope.treedata[3],
619-
$scope.treedata[3].children[2],
620-
$scope.treedata[3].children[2].children[1]];
621-
622-
$scope.setExpanded = function() {
623-
$scope.expandedNodes = [$scope.treedata[1],
624-
$scope.treedata[2],
625-
$scope.treedata[2].children[2]
626-
];
627-
};
628-
629-
}
630-
</script>
631-
</section>
632-
633633
<section id="children" ng-controller="Children">
634634
<div class="page-header">
635635
<h1>Custom Children <small>(options.nodeChildren)</small></h1>
@@ -686,7 +686,6 @@ <h1>Custom Children <small>(options.nodeChildren)</small></h1>
686686

687687
order nodes
688688
conditional css class
689-
set expanded - expanded nodes
690689
</div>
691690
<div class="col-md-3">
692691
<ul nav class="nav docs-sidenav">

0 commit comments

Comments
 (0)