ya tree - original

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><input type="text" ng-model="num" valid-number="4"></div>
        <div>
            <button ng-click="addChild(data)">+ New</button>
        </div>
        <div class="live">
            <ol>
                <li ya-tree="child in data.children at ol" ng-init="child.minimized=true" ng-class="{minimized:child.minimized}">
                    <div>
                        <button ng-if="child.children.length > 0" class="toggle" ng-click="toggleMinimized(child)" ng-switch on="child.minimized"><span ng-switch-when="true">&#x25B6;</span><span ng-switch-default>&#x25BC;</span>

                        </button>
                        <button ng-if="child.children.length === 0" class="toggle"><span>&nbsp;</span>

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

                    </div>
                    <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>
                    <ol ng-class="{pregnant:child.children.length}"></ol>
                </li>
            </ol>
        </div>
    </div>
</div>

CSS

[ng-cloak] {
    display: none;
}
* {
    box-sizing: border-box
}
body {
    font: 12px/16px helvetica, arial, sans-serif;
    background: #eee;
}
ol {
    margin:4px 0;
    border: 0 none transparent;
    padding: 0;
}
li {
    list-style:none;
    margin: 1px;
    padding: 8px 8px 4px 8px;
    background: #fff;
}
.live {
    width: 100%;
    margin-right: 5%;
}
.pregnant {
    border: 0 none transparent;
}
.bg0 {
    background:#fcc;
}
.bg1 {
    background:#ffc;
}
.bg2 {
    background:#cfc;
}
.bg3 {
    background:#cff;
}
.bg4 {
    background:#ccf;
}
.bg5 {
    background:#fcf;
}
.minimized > ol > li {
    display:none;
}
.minimized > ol {
    border: 0 none transparent;
}
.toggle {
    border: 0 none transparent;
    background:transparent;
    width:2em;
    color:#aaa;
}
.roi-details {
    background-color: gray;
    position: absolute;
    width: 100%;
}

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: []
                            }]
                        }]
                    }]
                }]
            }]
        }, {
            selectedItem: {
                value: 2,
                text: 2
            },
            children: [{
                selectedItem: {
                    value: 11,
                    text: 12
                },
                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,
       ...