dyna- Ya tree

by Amitesh Kumar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.2/angular.min.js"></script>
<div ng-app="app" ng-cloak>
    <div ng-controller="TreeController">
        <div>
            <button ng-click="addChild(data)">+ New</button>
        </div>
        <div class="live">
            <ul class="dynatree-container">
                <li ya-tree="child in data.children at ul" ng-init="child.minimized=false" ng-class="{minimized:child.minimized}"> <span class="dynatree-node" ng-class="{'dynatree-exp-e':!child.minimized,'dynatree-has-children':child.children.length }">
                        <span ng-class="{'dynatree-expander':child.children.length,'dynatree-connector':!child.children.length }" ng-click="toggleMinimized(child)"></span>
 <span>{{nodeLabel[$depth]}}</span>

                    <select ng-options="item.text for item in DDWOptions[$depth] track by item.value" ng-model="child.selectedItem" ng-change="onSelect(child.selectedItem, $depth)">
                        <option style="display:none" value="">--select --</option>
                    </select> <span ng-if="$depth < LEAF_NODE_HEIGHT">
                        <button ng-click="addChild(child)">+</button>
                        <button ng-click="remove(child)" style='color:red'>x</button>
                            </span>
</span>
                    <div class="roi-details" ng-if="child.selectedItem && $depth === LEAF_NODE_HEIGHT">This is grid view for selected item, can be opened in the modal popup as well.</div>
                    <ul ng-class="{'inner-tree':child.children.length}"></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

/*******************************************************************************
 * Tree container
 */
 ul.dynatree-container {
    font-family: tahoma, arial, helvetica;
    font-size: 10pt;
    /* font size should not be too big */
    white-space: nowrap;
    padding: 3px;
    margin: 0;
    /* issue 201
    background-color: white;
    border: 1px dotted gray;
    overflow: auto; */
    /*	height: 100%; /* issue 263, 470 */
    min-height: 0%;
}
ul.dynatree-container ul {
    padding: 0 0 0 16px;
    margin: 0;
}
ul.dynatree-container li {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    -moz-background-clip:border;
    -moz-background-inline-policy: continuous;
    -moz-background-origin: padding;
    background-attachment: scroll;
    background-color: transparent;
    background-repeat: repeat-y;
    background-image: url("http://wwwendt.de/tech/dynatree/src/skin/vline.gif");
    background-position: 0 0;
    /*
	background-image: url("icons_96x256.gif");
	background-position: -80px -64px;
	*/
    margin: 0;
    padding: 1px 0 0 0;
}
/* Suppress lines for last child node */
 ul.dynatree-container li.dynatree-lastsib {
    background-image: none;
}

 ul.dynatree-container li:last-child {
    background-image: none;
}
/* Suppress lines if level is fixed expanded (option minExpandLevel) */
 ul.dynatree-no-connector > li {
    background-image: none;
}

/*******************************************************************************
 * Common icon definitions
 */
 span.dynatree-empty, span.dynatree-vline, span.dynatree-connector, span.dynatree-expander, span.dynatree-icon, span.dynatree-checkbox, span.dynatree-radio, span.dynatree-drag-helper-img, #dynatree-drop-marker {
    width: 16px;
    height: 16px;
    /*	display: -moz-inline-box; /* @ FF 1+2 removed for issue 221 */
    /*	-moz-box-align: start; /* issue 221 */
    display: inline-block;
    /* Required to make a span sizeable */
    vertical-align: top;
   ...

JavaScript

var app = angular.module('app', []);

app.controller('TreeController', ['$scope', function ($scope) {
    $scope.data = {
        children: [{
            selectedItem: {
                value: 1,
                text: 1
            },
            children: [{
                selectedItem: {
                    value: 11,
                    text: 12
                },
                children: [{
                    selectedItem: {
                        value: 'R',
                        text: 'R'
                    },
                    children: [{
                        selectedItem: {
                            value: 111,
                            text: 111
                        },
                        children: [{
                            selectedItem: {
                                value: 123,
                                text: 123
                            },
                            children: [{
                                children: []
                            }]
                        }]
                    }]
                }]
            }]
        }]
    };

    var dd1 = [{
        value: 1,
        text: 1
    }, {
        value: 2,
        text: 2
    }];
    var dd2 = [{
        value: 11,
        text: 11
    }, {
        value: 12,
        text: 12
    }];
    var dd3 = [{
        value: 'P',
        text: 'P'
    }, {
        value: 'R',
        text: 'R'
    }];
    var dd4 = [{
        value: 111,
        text: 111
    }, {
        value: 123,
        text: 123
    }];
    var dd5 = [{
        value: 111,
        text: 111
    }, {
        value: 123,
        text: 123
    }];
    var dd6 = [{
        value: 111,
        text: 111
    }, {
        value: 123,
        text: 123
    }];

    $scope.DDWOptions = [dd1, dd2, dd3, dd4, dd5, dd6];
    $scope.LEAF_NODE_HEIGHT = $scope.DDWOptions.length - 1; // 5; //0 based index
    $scope.nodeLabel = ['Association', 'Network', 'Pin Indicator', 'Label 4', 'Label...