JSFiddle - React, Tailwind, and code Playground

by aaronheld

HTML

<script src="http://code.angularjs.org/angular-0.10.5.js" ng:autobind></script>
<div ng:controller="FormBuilderCtrl">

    <div ng:repeat="field in fields.$orderBy('order')">
        <ng:switch on="field.type">
            <h3 ng:switch-when="header">
                {{field.name}}
                <span class="order">{{field.order}}</span>
                <button class="edit" ng:click="editField(field)">Edit</button>
                <button class="delete" ng:click="splice(field, fields)">Remove</button>
            </h3>
            <div ng:switch-default class="input {{field.type}}" ng:class="field.required && 'required'">
                <label>
                    <button class="edit" ng:click="editField(field)">Edit</button>
                    <button class="delete" ng:click="splice(field, fields)">Remove</button>
                    {{field.name}}
                    <span class="order">{{field.order}}</span>
                </label>
                <ng:switch on="field.type">
                    <input ng:switch-default type="{{field.type}}"
                        ng:model="field.value" ng:bind-attr="{required:'{{field.required}}'}" value="{{field.value}}" placeholder="{{field.placeholder}}">
                    <input ng:switch-when="checkbox" type="checkbox"
                        ng:model="field.value" value="{{field.value}}" id="field" placeholder="{{field.instructions}}">
                    <textarea ng:switch-when="textarea"
                        ng:model="field.value" placeholder="{{field.instructions}}">{{field.value}}</textarea>
                    <select ng:switch-when="select"
                        ng:model="field.value" >
                        <option ng:repeat="option in field.options" value="{{option.value}}">{{option.name}}</option>
                    </select>
                    <select ng:switch-when="multiple"
                        ng:model="field.value" multiple>
                        <option ng:repeat="option in...

JavaScript

[{
  "name":"Name",
  "order":10,
  "placeholder":"John Doe",
  "type":"text"},{
  "name":"salesrep",
  "options":[{
    "name":"steve",
    "order":0,
    "value":"steve"},{
    "name":"tonhy",
    "order":0,
    "value":"tony"}],
  "required":true,
  "type":"select"},{
  "name":"startdate",
  "order":0,
  "placeholder":"date",
  "required":false,
  "type":"text"}]