Skip to content

Commit a77df25

Browse files
davidlgjdavidlgj
committed
Moved example page
1 parent 97cc2e9 commit a77df25

File tree

4 files changed

+231
-3
lines changed

4 files changed

+231
-3
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
22
coverage
3+
bower_components

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Angular Schema Form
33

44
Generate forms from a JSON schema, with AngularJS!
55

6-
### [Try out the example page](http://textalk.github.io/angular-schema-form/src/bootstrap-example.html)
6+
### [Try out the example page](http://textalk.github.io/angular-schema-form/examples/bootstrap-example.html)
77
...where you can edit the schema or the form definition and see what comes out!
88

99

‎bower.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@
2121
"coverage"
2222
],
2323
"dependencies": {
24-
"tv4": "^1.0.15",
25-
"pickadate": "^3.5.2"
24+
"angular": "~1.2.18"
25+
"tv4": "~1.0.15",
26+
"pickadate": "~3.5.2",
2627
},
2728
"devDependencies": {
2829
"angular-ui-ace": "bower"

‎examples/bootstrap-example.html

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
<!DOCTYPE html>
2+
<html ng-app="test">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Boostrap Schema Form example</title>
6+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
8+
<link rel="stylesheet" href="../bower_components/pickadate/lib/themes/classic.css">
9+
<link rel="stylesheet" href="../bower_components/pickadate/lib/themes/classic.date.css">
10+
<style type="text/css">
11+
12+
body,html {
13+
min-height: 1400px;
14+
}
15+
16+
.red {
17+
border: 1px solid red;
18+
background: #fee;
19+
}
20+
21+
.ace_editor { font-size: 20px !important;}
22+
.form { height: 400px; }
23+
.schema { height: 800px; }
24+
</style>
25+
</head>
26+
<body ng-controller="TestCtrl">
27+
28+
<div class="col-md-12">
29+
<h1>Schema Form Example</h1>
30+
<div class="row">
31+
<div class="col-sm-4">
32+
<h3>The Generated Form</h3>
33+
<form name="ngform" sf-model="person" sf-form="form" sf-schema="schema" sf-decorator="{{decorator}}">
34+
</form>
35+
<h3>Model</h3>
36+
<pre ng-cloak>{{pretty()}}</pre>
37+
</div>
38+
<div class="col-sm-8">
39+
<h3>Form</h3>
40+
<div ui-ace="{ theme: 'monokai',mode:'json'}"
41+
ng-class="{red: !itParsesForm}" ng-model="formJson" class="form-control form"></div>
42+
<h3>Schema</h3>
43+
<div ui-ace="{ theme: 'monokai',mode:'json'}"
44+
ng-class="{red: !itParses}" ng-model="schemaJson" class="form-control schema"></div>
45+
</div>
46+
</div>
47+
</div>
48+
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
49+
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
50+
<script type="text/javascript" src="../bower_components/ace-builds/src-min-noconflict/ace.js"></script>
51+
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
52+
<script type="text/javascript" src="../bower_components/angular-ui-ace/ui-ace.js"></script>
53+
<script type="text/javascript" src="../bower_components/pickadate/lib/picker.js"></script>
54+
<script type="text/javascript" src="../bower_components/pickadate/lib/picker.date.js"></script>
55+
<script type="text/javascript" src="../bower_components/pickadate/lib/translations/sv_SE.js"></script>
56+
<script type="text/javascript" src="../dist/schema-form.min.js"></script>
57+
<script type="text/javascript" src="../dist/bootstrap-decorator.min.js"></script>
58+
<script type="text/javascript">
59+
60+
angular.module('test',['schemaForm','ui.ace']);
61+
62+
function TestCtrl($scope){
63+
$scope.person = { favorite: 'NaN' };
64+
65+
$scope.schema = {
66+
"type": "object",
67+
"required": ['name','shoesize'],
68+
"properties": {
69+
"name": {
70+
"title": "Name",
71+
"description": "Gimme yea name lad",
72+
"type": "string",
73+
"pattern": "^[^/]*$",
74+
"minLength": 2
75+
},
76+
"favorite": {
77+
"title": "Favorite",
78+
"type": "string",
79+
"enum": [
80+
"undefined",
81+
"null",
82+
"NaN",
83+
]
84+
},
85+
"shoesize": {
86+
"title": "Shoe size",
87+
"default": 42,
88+
"type": "number",
89+
},
90+
"attributes": {
91+
"type": "object",
92+
"title": "Attributes",
93+
"required": ['eyecolor'],
94+
"properties": {
95+
"eyecolor": { "type": "string", "title": "Eye color" },
96+
"haircolor": { "type": "string", "title": "Hair color" },
97+
"shoulders": {
98+
"type": "object",
99+
"title": "Shoulders",
100+
"properties": {
101+
"left": { "type": "string", "title": "Left" },
102+
"right": { "type": "string", "title": "Right" },
103+
}
104+
}
105+
}
106+
},
107+
"things": {
108+
"type": "array",
109+
"title": "I like...",
110+
"items": {
111+
"type": "string",
112+
"enum": [
113+
"clowns","compiling","sleeping"
114+
]
115+
}
116+
},
117+
"soul": {
118+
"title": "Terms Of Service",
119+
"description": "I agree to sell my undying soul",
120+
"type": "boolean",
121+
"default": true,
122+
},
123+
"soulserial": {
124+
"title": "Soul Serial No",
125+
"type": "string"
126+
},
127+
"date": {
128+
"title": "Date of party",
129+
"type": "string",
130+
"format": "date"
131+
},
132+
"radio": {
133+
"type":"string",
134+
"enum": ["Transistor","Tube"]
135+
},
136+
"radiobuttons": {
137+
"type":"string",
138+
"enum": ["Select me!","No me!"]
139+
}
140+
}
141+
};
142+
143+
$scope.form = [
144+
{
145+
key: "name",
146+
placeholder: "Check the console",
147+
onChange: "log(modelValue)",
148+
feedback: "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
149+
},
150+
{
151+
key: "favorite",
152+
feedback: false
153+
},
154+
"attributes",
155+
{
156+
key: "shoesize",
157+
feedback: false
158+
},
159+
"things",
160+
"soul",
161+
{
162+
type: "conditional",
163+
condition: "person.soul",
164+
items: [
165+
{ key: "soulserial", placeholder: "ex. 666" }
166+
]
167+
},
168+
{ key: "date", minDate: "2014-06-20" },
169+
{ key: "radio", type: "radios" },
170+
{ key: "radiobuttons", type: "radiobuttons" },
171+
{
172+
type: 'actions',
173+
items: [
174+
{ type: 'submit', title: 'Do It!'},
175+
{ type: 'button', title: 'Noooooooooooo', onClick: 'sayNo()'}
176+
]
177+
}
178+
];
179+
180+
$scope.decorator = 'bootstrap-decorator';
181+
182+
$scope.itParses = true;
183+
$scope.itParsesForm = true;
184+
$scope.schemaJson = JSON.stringify($scope.schema,undefined,2);
185+
$scope.formJson = JSON.stringify($scope.form,undefined,2);
186+
187+
$scope.$watch('schemaJson',function(val,old){
188+
if (val && val !== old) {
189+
try {
190+
$scope.schema = JSON.parse($scope.schemaJson);
191+
$scope.itParses = true;
192+
} catch (e){
193+
$scope.itParses = false;
194+
}
195+
}
196+
});
197+
198+
$scope.$watch('formJson',function(val,old){
199+
if (val && val !== old) {
200+
try {
201+
$scope.form = JSON.parse($scope.formJson);
202+
$scope.itParsesForm = true;
203+
} catch (e){
204+
$scope.itParsesForm = false;
205+
}
206+
}
207+
});
208+
209+
210+
$scope.pretty = function(){
211+
return JSON.stringify($scope.person,undefined,2,2);
212+
};
213+
214+
$scope.log = function(msg){
215+
console.log("Simon says",msg);
216+
};
217+
218+
$scope.sayNo = function() {
219+
alert('Noooooooo');
220+
};
221+
222+
}
223+
224+
</script>
225+
</body>
226+
</html>

0 commit comments

Comments
 (0)