mm-dynamic-forms
Version:
Customized ngMaterial formly generator
126 lines (111 loc) • 3.23 kB
HTML
<html ng-app="app" id="ng-app">
<head>
<title>MM Dynamic Forms Test</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
.nav,
.pagination,
.carousel a {
cursor: pointer;
}
.fixed {
position: fixed;
margin: 0;
}
[ng-cloak] {
display: none;
}
div.fixed {
overflow-y: auto;
height: 100%;
margin-left: -15px;
}
pre {
margin: 1ex 0;
}
form,
ng-form {
border: 1px solid blue;
border-radius: 4px;
display: block;
}
fieldset {
border: 1px solid blue;
border-radius: 4px;
display: block;
padding: .35em .625em .75em;
margin: 0 2px;
}
legend {
font-weight: bold;
}
fieldset > legend:first-of-type {
border: none;
margin-bottom: auto;
width: inherit;
padding: inherit;
color: blue;
}
label,
span,
form > button,
ng-form > button,
form > input,
ng-form > input {
width: 48%;
padding: 1ex 1em;
}
label > input,
label > select,
label > textarea {
float: right;
width: 60%;
}
label div > label {
display: block;
padding: 1ex;
width: 100%;
}
</style>
<!--[if lte IE 8]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.1/json3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.min.js"></script>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
document.createElement('ng-form');
document.createElement('dynamic-form');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
document.createElement('ng:form');
$(document).ready(function() {
angular.bootstrap(document.documentElement);
});
</script>
<![endif]-->
</head>
<body ng-controller="AppCtrl" ng-cloak="">
<p>This demo is an example of the basic functionality of this module. Have a look
through the code and get a feel for how everything works.</p>
<form mm-dynamic-form class="col-md-8" template-url="form-template.js" >
<legend>templateUrl= test</legend>
</form>
<!-- <form mm-dynamic-form class="col-md-12" template="stdFormTemplate" >
<legend>template= test</legend>
</form> -->
<div class="col-md-4">
<div class="fixed col-md-4">
<pre>stdFormData: {{stdFormData | pretty}}</pre>
<pre>urlFormData: {{urlFormData | pretty}}</pre>
</div>
</div>
<!-- Load scripts at the end for performance. -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="../mm-dynamic-forms.js"></script>
<script src="app.js"></script>
</body>
</html>