JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-controller="Ctrl">
<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>
JavaScript
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": "DescSubSub",
"dLength": "",
"dWidth": "",
"dHeight": "",
"bOpt1": "",
"bOpt2": ""
}]
}]
}, {
"iSortKey": 0,
"sDescription": "Desc:",
"oConfigSubEntriesColl": [{
"sDescription":...