<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sample Angular Form App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div data-ng-app="app" data-ng-controller="FormCtrl">
<div class="block-group">
<form class="block collection-form" name="collectionForm" data-ng-show="fields">
<div class="block-group" data-ng-repeat="field in fields">
<span class="field block" data-ng-include="field.type"></span>
<button class="block edit-button" data-ng-click="editField(field)">Edit Field</button>
</div>
<button type="submit" data-ng-click="save()" data-ng-disabled="collectionForm.$invalid">Save</button>
</form>
<div class="block saved-list">
<div class="saved-row" data-ng-repeat="form in saved" data-ng-click="editForm(form)">{{form.date_submitted | date:'medium'}}</div>
</div>
</div>
<div class="block-group new-field">
<form name="newFieldForm" data-ng-controller="NewFieldCtrl">
<input type="text" data-ng-model="newField.id" placeholder="Unique ID" required data-ng-disabled="fields[newField.id]" />
<input type="text" data-ng-model="newField.name" placeholder="Field Name" required />
<select data-ng-model="newField.type" required>
<option value="">Field Type</option>
<option value="text_field">text</option>
<option value="select_field">select</option>
<option value="radio_field">radio</option>
<option value="checkbox_field">checkboxes</option>
</select>
<label><input type="checkbox" data-ng-model="newField.required" />Required</label>
<button data-ng-disabled="newFieldForm.$invalid" data-ng-click="addField()">Save</button>
<div class="select-inputs" data-ng-show="newField.type && newField.type != 'text_field'">
<div data-ng-repeat="option in newField.options"><input type="text" data-ng-model="option" /></div>
<input type="text" data-ng-model="newFieldOption" placeholder="Field Option" />
<button data-ng-click="addFieldOption()">Add Option</button>
</div>
</form>
</div>
<script type="text/ng-template" id="text_field">
<input type="text" placeholder="{{field.name}}" data-ng-model="form[field.id]" data-ng-required="field.required" />
</script>
<script type="text/ng-template" id="select_field">
<select data-ng-model="form[field.id]" data-ng-options="option for option in field.options" data-ng-required="field.required">
<option value="">{{field.name}}</option>
</select>
</script>
<script type="text/ng-template" id="radio_field">
{{field.name}}
<label data-ng-repeat="option in field.options"><input type="radio" data-ng-model="form[field.id]" value="{{option}}" />{{option}}</label>
</script>
<script type="text/ng-template" id="checkbox_field">
{{field.name}}
<label data-ng-repeat="option in field.options"><input type="checkbox" data-ng-model="form[field.id][$index]" value="{{option}}" />{{option}}</label>
</script>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/007design/sample-angular-form-app-XKaXdQ */
/*! PocketGrid 1.1.0
* Copyright 2013 Arnaud Leray
* MIT License
*/
/* Border-box-sizing */
.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix */
.block-group {
*zoom: 1;
}
.block-group:before, .block-group:after {
display: table;
content: "";
line-height: 0;
}
.block-group:after {
clear: both;
}
.block-group {
/* ul/li compatibility */
list-style-type: none;
padding: 0;
margin: 0;
}
/* Nested grid */
.block-group > .block-group {
clear: none;
float: left;
margin: 0 !important;
}
/* Default block */
.block {
float: left;
width: 100%;
}
.field,
.edit-button,
.collection-form,
.saved-list {
width: 50%;
}
.saved-row {
padding: 0.5em;
border-bottom: 1px solid black;
cursor: pointer;
}
/*Downloaded from https://www.codeseek.co/007design/sample-angular-form-app-XKaXdQ */
angular.module('app', [])
.service('fieldSvc', [function() {
return this;
}])
.service('savedSvc', [function() {
return this;
}])
.controller('FormCtrl', ['$scope', 'fieldSvc', 'savedSvc', function($scope, fieldSvc, savedSvc) {
$scope.$watch(function() {
return fieldSvc.fields;
}, function(f) {
$scope.fields = f;
});
$scope.$watch(function() {
return savedSvc.data;
}, function(s) {
$scope.saved = s;
});
$scope.form = {};
$scope.editForm = function(form) {
$scope.form = form;
};
$scope.editField = function(field) {
$scope.$broadcast('editField', field);
};
$scope.save = function() {
savedSvc.data = savedSvc.data || [];
$scope.form.date_submitted = new Date();
savedSvc.data.push($scope.form);
$scope.form = {};
};
}])
.controller('NewFieldCtrl', ['$scope', 'fieldSvc', function($scope, fieldSvc) {
$scope.$on('editField', function(evt, args) {
$scope.newField = args;
});
$scope.addField = function() {
fieldSvc.fields = fieldSvc.fields || {};
fieldSvc.fields[$scope.newField.id] = $scope.newField;
$scope.newField = {};
$scope.newFieldOption = '';
};
$scope.addFieldOption = function() {
$scope.newField.options = $scope.newField.options || [];
$scope.newField.options.push($scope.newFieldOption);
$scope.newFieldOption = '';
};
}]);
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
AngularJS
v1.5.5
Normalize
