example/index.html

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Form Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="../src/angulardynamicform.js"></script>
<script type="text/javascript" src="example.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body ng-app="example" ng-controller="Example" class="ng-cloak">

<div class="container">

<h1>Dynamic Form</h1>

<dynamic-table-form fields="fields" data="data" class="form-horizontal">

  <input dynamic-field-type="string" ng-model="value" type="text" maxlength="{{config.maxLength}}" size="{{config.maxLength}}">

  <input dynamic-field-type="date" ng-model="value" type="date">

  <ul dynamic-field-type="array">
    <li dynamic-field-child>
      <ng-transclude></ng-transclude>
      <button ng-click="removeChild(childKey)">Remove</button>
    </li>
    <button ng-click="addChild()">Add Another</button>
  </ul>

  <select dynamic-field-type="select" ng-model="value"
          ng-options="option.value as option.caption for option in config.options"></select>

  <input dynamic-field-type="integer" ng-model="value" type="number" size="{{config.maxLength}}" maxlength="{{config.maxLength}}" min="{{config.minValue}}" max="{{config.maxValue}}">

</dynamic-table-form>

<h1>Raw Data</h1>

<pre>{{data|json}}</pre>

</div>

</body>
</html>