Angular: Form Builder
Made a simple form-builder demo for my work. Has sorting, almost every type of input, and works pretty well.
Could use a few more options for help text and drag-n-drop sorting.
HTML
<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
<div ng:controller="Controller">
<div ng:repeat="field in fields">
<ng:switch on="field.type">
<div ng:switch-default class="input {{field.type}}" ng:class="field.required && 'required'">
<label>
{{field.name}}
</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="date" type="date"
ng:model="field.value" ng:bind-attr="{required:'{{field.required}}'}" value="{{field.value}}" placeholder="{{field.placeholder}}">
<select ng:switch-when="select"
ng:model="field.value" >
<option ng:repeat="option in field.options" value="{{option.value}}">{{option.name}}</option>
</select>
</ng:switch>
</div>
</ng:switch>
</div>
</div>
JavaScript
function Controller() {
$scope = this;
this.fields = [
{"name" : "startDate", "type":"date", "prompt":"Start date for report"},
{"name" : "endDate", "type":"date", "prompt":"End date for report"},
{"name" : "salesrep", "type":"select", "required": true, "options":[
{"name":"B. Hartnell", value:1},
{"name":"J. Pertwee", value:3},
{"name":"P Troughton", value:2},
{"name":"T Baker", value:4},
{"name":"D Tennant", value:10}
]
}
]
}