JSFiddle - React, Tailwind, and code Playground

by s85g

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="myApp">
    <div ng-controller="MyCtrl" class="container" >
        <h3>{{title}}</h3>
        <hr />
        <div ng-repeat='item in items' >
          <form-maker items='item'></form-maker>
        </div>
    </div>
</div>

CSS

.form-control {
  max-width: 200px;
}

.col-sm-2 {
  border-bottom: 2px solid green;
}

JavaScript

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

myApp.controller('MyCtrl', function($scope) {
		$scope.title = "Angular dynamic form";
    $scope.items = [
                      {name: "item1", value: "item1-value"},
                      {name: "item2", value: [
                          {name: "item21", value: "item21-value"},
                          {name: "item22", value: "item22-value"},
                          {name: "item23", value: [
                              {name: "item231", value: "item231-value"},
                              {name: "item232", value: "item232-value"},
                              {name: "item233", value: [
                                  {name: "item2331",value: "item2331-value"},
                                  {name: "item2332",value: "item2332-value"}
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ];
});

myApp.directive('formMaker', function($compile) {
	return {
  	restrict: 'E',
    replace: true,
    scope: {
    	items: "="
    },
    template: '<div></div>',
    link: function (scope, ele, attrs) {
        scope.label = scope.items.name;
        scope.value = scope.items.value;
        
        var template = "<div class='row form-group'> \
        									<label class='col-sm-2 control-label'>{{label}}</label> \
                      		<div class='col-sm-10'>";
        if (scope.value instanceof Array) {
          template += "<ul class='list-group'> \
          								<li class='list-group-item' ng-repeat='item in value'> \
                          		<form-maker items='item'></form-maker> \
                          </li> \
                       </ul>";
        } else {
          template += "<input type='text' ng-model='value' class='form-control' />";
        }
        template += "</div></div>";
          
        ele.append(template);
       ...