index.html 1.81 KB
<!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/ui-bootstrap-tpls.0.11.2.js"></script>

    <link href="demo/bootstrap.3.1.1.css" rel="stylesheet" type="text/css">

    <script src="angular-tree-control.js"></script>
    <link rel="stylesheet" type="text/css" href="css/tree-control.css">
</head>
<body ng-app="example">

<section id="classic" ng-controller="Classic">

    <treecontrol class="tree-classic"  tree-model="treedata"  on-selection="showSelected(node)">
        label: {{node.label}} ({{node.id}})
    </treecontrol>


    <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>

</section>



<script>

    var example = angular.module("example", ["treeControl", "ui.bootstrap"]);

        function Classic($scope) {
        $scope.treedata=createSubTree(3, 4, "");
        $scope.showSelected = function(sel) {
            $scope.selectedNode = sel;
        };
            console.log($scope.treedata);

    }


    var names = ['Homer', 'Marge', 'Bart', 'Lisa', 'Mo'];
    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 +"."), "name": names[i%names.length] });
            return res;
        }
        else
            return [];
    }
</script>

</body>
</html>