JSFiddle - React, Tailwind, and code Playground

by ppellegr

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div ng-controller="Ctrl" id="ConfigContainer">
    <ul>
        <li ng-repeat="oConfigEntry in oConfiguration.oConfigEntriesColl">
            <ul>{{oConfigEntry.sDescription}}
                <li ng-repeat="oConfigSubEntry in oConfigEntry.oConfigSubEntriesColl">{{oConfigSubEntry.sDescription}}
                    <input type='checkbox' ng-model='oConfigSubEntry.bNoOption' />{{oConfigSubEntry.bNoOption}}
                    <ul>
                        <li ng-repeat='oConfigSubSubEntry in oConfigSubEntry.oConfigSubSubEntriesColl'>{{oConfigSubSubEntry.sDescription}}
                            <input type='number' placeholder='length' ng-model='oConfigSubSubEntry.dLength' />
                            <input type='number' placeholder='width' ng-model='oConfigSubSubEntry.dWidth' />
                            <input type='number' placeholder='height' ng-model='oConfigSubSubEntry.dHeight' />
                            <input type='checkbox' title='opt1' ng-model='oConfigSubSubEntry.bOpt1' />
                            <input type='checkbox' title='opt2' ng-model='oConfigSubSubEntry.bOpt2' />
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
<pre ng-bind="oConfiguration | json"></pre> 
</div>

CSS

#ConfigContainer ul, li {
    list-style: none;
}

#ConfigContainer .collapsed:before {
    content: "+";
}

#ConfigContainer .expanded:before {
    content: "-";
}

JavaScript

function prepareList() {
    $('#ConfigContainer').find('li:has(ul)')
        .click(function (event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
        .addClass('collapsed')
        .children('ul').hide();
}

$(document).ready(function () {
    prepareList();
});

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

function Ctrl($scope) {
    $scope.oConfiguration = {
        "oConfigEntriesColl": [{
            "iSortKey": 0,
                "sDescription": "Desc:",
                "oConfigSubEntriesColl": [{
                "sDescription": "DescSub:",
                    "bNoOption": false,
                    "oConfigSubSubEntriesColl": [{
                    "sDescription": "DescSubSub",
                        "dLength": "",
                        "dWidth": "",
                        "dHeight": "",
                        "bOpt1": "",
                        "bOpt2": ""
                }, {
                    "sDescription": "DescSubSub",
                        "dLength": "",
                        "dWidth": "",
                        "dHeight": "",
                        "bOpt1": "",
                        "bOpt2": ""
                }, {
                    "sDescription": "DescSubSub",
                        "dLength": "",
                        "dWidth": "",
                        "dHeight": "",
                        "bOpt1": "",
                        "bOpt2": ""
                }]
            }, {
                "sDescription": "DescSub:",
                    "bNoOption": false,
                    "oConfigSubSubEntriesColl": [{
                    "sDescription": "DescSubSub",
                        "dLength": "",
                        "dWidth": "",
                        "dHeight": "",
                        "bOpt1": "",
                        "bOpt2": ""
                }, {
                    "sDescription":...