var app = angular.module('plunker', ['schemaForm']);
app.controller('MainCtrl', function($scope, $http) {
var vm = this;
vm.form = [
"*", {
"type": "submit",
"title": "OK"
}
];
vm.schema = {
"type": "object",
"title": "Types",
"properties": {
"string": {
"type": "string",
"minLength": 3
},
"integer": {
"type": "integer"
},
"number": {
"type": "number"
},
"boolean": {
"type": "boolean"
}
},
"required": [
"number"
]
};
vm.model = {
boolean: true,
string: 'abc',
integer: 1234,
number: 3.1416
};
vm.loadData = function(){
$http({
method:'GET',
url:'data.json'
}).then(function(response){
var data = response.data;
vm.form = data.form;
vm.schema = data.schema;
vm.model = data.model;
});
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.11/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="objectPath.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tv4/1.3.0/tv4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-schema-form/0.8.13/schema-form.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-schema-form/0.8.13/bootstrap-decorator.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<form sf-schema="vm.schema" sf-form="vm.form" sf-model="vm.model"></form>
<pre>{{vm.model}}</pre>
<button class="btn btn-default" ng-click="vm.loadData()">Other Schema</button>
</body>
</html>
/* Put your css in here */
'use strict';
;!function(undefined) {
var ObjectPath = {
parse: function(str){
if(typeof str !== 'string'){
throw new TypeError('ObjectPath.parse must be passed a string');
}
var i = 0;
var parts = [];
var d, b, q, c;
while (i < str.length){
d = str.indexOf('.', i);
b = str.indexOf('[', i);
// we've reached the end
if (d === -1 && b === -1){
parts.push(str.slice(i, str.length));
i = str.length;
}
// dots
else if (b === -1 || (d !== -1 && d < b)) {
parts.push(str.slice(i, d));
i = d + 1;
}
// brackets
else {
if (b > i){
parts.push(str.slice(i, b));
i = b;
}
q = str.slice(b+1, b+2);
if (q !== '"' && q !=='\'') {
c = str.indexOf(']', b);
if (c === -1) c = str.length;
parts.push(str.slice(i + 1, c));
i = (str.slice(c + 1, c + 2) === '.') ? c + 2 : c + 1;
} else {
c = str.indexOf(q+']', b);
if (c === -1) c = str.length;
while (str.slice(c - 1, c) === '\\' && b < str.length){
b++;
c = str.indexOf(q+']', b);
}
parts.push(str.slice(i + 2, c).replace(new RegExp('\\'+q,'g'), q));
i = (str.slice(c + 2, c + 3) === '.') ? c + 3 : c + 2;
}
}
}
return parts;
},
// root === true : auto calculate root; must be dot-notation friendly
// root String : the string to use as root
stringify: function(arr, quote){
if(!Array.isArray(arr))
arr = [arr.toString()];
quote = quote === '"' ? '"' : '\'';
return arr.map(function(n){ return '[' + quote + (n.toString()).replace(new RegExp(quote, 'g'), '\\' + quote) + quote + ']'; }).join('');
},
normalize: function(data, quote){
return ObjectPath.stringify(Array.isArray(data) ? data : ObjectPath.parse(data), quote);
},
// Angular
registerModule: function(angular) {
angular.module('ObjectPath', []).provider('ObjectPath', function(){
this.parse = ObjectPath.parse;
this.stringify = ObjectPath.stringify;
this.normalize = ObjectPath.normalize;
this.$get = function(){
return ObjectPath;
};
});
}
};
// AMD
if (typeof define === 'function' && define.amd) {
define(function() {
return {
// this is only namespaced for backwards compatibility when fixing issue #8
ObjectPath: ObjectPath,
// export these as top-level functions
parse: ObjectPath.parse,
stringify: ObjectPath.stringify,
normalize: ObjectPath.normalize
};
});
}
// CommonJS
else if (typeof exports === 'object') {
exports.ObjectPath = ObjectPath;
}
// Browser global
else {
window.ObjectPath = ObjectPath;
}
}();
{
"form":
[
"*", {
"type": "submit",
"title": "OK",
"style": "btn-success"
}
],
"schema":{
"type": "object",
"title": "Types",
"properties": {
"name": {
"type": "string",
"minLength": 3
},
"lastName": {
"type": "string"
},
"age": {
"type": "number"
},
"boolean": {
"type": "boolean"
}
},
"required": [
"number"
]
},
"model":{
"boolean": true,
"name": "john",
"lastName": "Doe",
"age": 34
}
}