JSFiddle - React, Tailwind, and code Playground

by hairgamiMaster

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div ng-app>
  <h2>Nested Form</h2>
    <p>I have an unkown set of data, with nested form objects. I can't figure out how to recursively call the logic to build different kinds of input fields. Any clever ideas or directives?</p>
  <div ng-controller="NestedFormCtrl">
    <form>
        <ul class="unstyled">
            <li ng-repeat="field in formData" data-ng-switch on="field.type">
                <div data-ng-switch-when="text">
                    <label>{{field.label}}</label>
                    <input type="text"/>
                </div>
                <div data-ng-switch-when="dropdown">
                    <label>{{field.label}}</label>
                    <select>
                        <option ng-repeat="option in field.options" value="{{option}}">{{option}}</option>
                    </select>
                </div>
                <div data-ng-switch-when="group" class="well">
                    <h2>{{field.label}}</h2>
                    <p>How can I recursively call the above switching logic inside this group?</p>
                    <p>Would a directive be the right AngularJS technique here?</p>
                </div>   
            </li>
        </ul>
            <input class="btn-primary" type="submit" value="Submit"/>
    </form>
  </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

function NestedFormCtrl($scope) {
  $scope.formData = [
      {label:'First Name', type:'text', required:'true'},
      {label:'Last Name', type:'text', required:'true'},
      {label:'Coffee Preference', type:'dropdown', options: ["HiTest", "Dunkin", "Decaf"]},
      {label: 'Address', type:'group', "Fields":[
          {label:'Street1', type:'text', required:'true'},
          {label:'Street2', type:'text', required:'true'},
          {label:'State', type:'dropdown',  options: ["California", "New York", "Florida"]}
      ]},
  ];
}