JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <select ng-model="selected" ng-change="update()">
            <option ng-repeat="option in tree" ng-bind-html-unsafe="option.displayName" value="{{$index}}">{{ option.displayName }}</option>
        </select>
    </div>
</div>

JavaScript

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

app.controller("mainCtrl", function ($scope) {
    $scope.data = [{
        "id": 1,
            "name": "web-development",
            "displayName": "Веб-разработка",
            "children": [{
            "id": 9,
                "name": "etc",
                "displayName": "Вне категорий"
                "typeId": 1,
                "parentId": 1
        }, {
            "id": 10,
                "name": "perfomance",
                "displayName": "Веб-производительность",
                "children": [],
                "typeId": 1,
                "parentId": 1
        }]
    }, {
        "id": 2,
            "name": "css",
            "displayName": "CSS",
            "children": []
    }];
    
    $scope.tree = [];
    function buildTree(data, depth) {
        for(d in data) {
            var c = angular.copy(data[d]); //copy object
            delete c['children'];  //we dont want to copy children
            c.displayName = Array(depth*4).join("&nbsp;") + c.displayName;
            $scope.tree.push(c);
            buildTree(data[d].children, depth+1);
        }
    }
    buildTree($scope.data, 0);
    console.log($scope.tree);
    
    $scope.update = function() {
        console.log($scope.tree[$scope.selected]);
    }
});