JSFiddle - React, Tailwind, and code Playground

by kyrisu

HTML

<html ng-app="app">
    
    <body ng-controller="TestController">
        <ul cr-ttree cr-select="selectType()" cr-children="getChildren"/>
        <div>{{ mockTypes }}</div>
    </body>

</html>

JavaScript

'use strict';

var app = angular.module('app', [])
    .controller("TestController", function ($scope) {
    $scope.mockTypes = [{
        id: 1,
        label: 'lvl 0',
        parent: 0
    }, {
        id: 2,
        label: 'lvl 1',
        parent: 1
    }, {
        id: 3,
        label: 'lvl 1',
        parent: 1
    }, {
        id: 4,
        label: 'lvl 0',
        parent: 0
    }, {
        id: 5,
        label: 'lvl 1',
        parent: 3
    }, {
        id: 6,
        label: 'lvl 1',
        parent: 4
    }];
    $scope.getChildren = function (t) {
        console.log("-> getChildren()");
        console.log(t);
        var out = [];
        var filter = t || {
            id: 0
        };
        for (var i = 0; i < $scope.mockTypes.length; i++) {
            if ($scope.mockTypes[i].parent === filter.id) {
                out.push($scope.mockTypes[i]);
            }
        }
        return out;
    };
    $scope.selectType = function (t) {
        t.selected = true;
    };
});

app.directive('crTtree', function () {
    return {
        template: '<ul>crChildren: {{ crChildren() }}<li cr-titem ng-repeat="t in crChildren(type)"></li></ul>',
        replace: true,
        transclude: true,
        restrict: 'A',
        controller: function ($scope) {
            $scope.tclick = function (t) {
                console.log("-> tclick(t)");
                console.log(t);
                t.selected = true;
                if ($scope.crSelect !== undefined) {
                    //$scope.crSelect(t);
                }
            };
        },
        scope: {
            crSelect: '&',
            crChildren: '=',
            crRoot: '='
        }
    };
});

app.directive('crTitem', function ($compile) {
    return {
        restrict: 'A',
        template: '<li class="clickable" ng-class="{\'alert-info\': t.selected}" ng-click="tclick(t)" > ' +
            ' <a class="type-select"> {{t.label}} </a>' +
            '</li>',
        link: function (scope,...