从服务器获取现有数据并以 angular 模式形式使用它
Getting existing data from the server and using it in angular schema form
我有一个使用 angular 架构表单创建的表单,我已将其发布到服务器。我现在想编辑我发布的数据。我可以得到这样的数据 isntance
app.controller('FormController', function($scope,$http){
$http.get("data/data.json").then(
function success(response) {
$scope.schema = angular.fromJson(response.data);
},
function error(response) { /* handle error */ });
// do other stuff
});
如何将从服务器获得的数据填充到我创建的现有表单中?
angular 模式表单如何做到这一点?
正在猜测您的数据。来自 $http。你可以做到这一点。对不起虚拟机。
我总是使用 controllerAs。
//已编辑我为您添加了 $http 的功能示例。
var app = angular.module('plunker', ['schemaForm']);
app.controller('MainCtrl', function($scope) {
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;
});
};
});
HTML
<!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>
data.json
{
"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
}
}
这是新的plnkr
编辑模式的关键在于服务器的响应加上表单和架构,您需要输入 vm.model,并记住模型需要符合架构属性。
我有一个使用 angular 架构表单创建的表单,我已将其发布到服务器。我现在想编辑我发布的数据。我可以得到这样的数据 isntance
app.controller('FormController', function($scope,$http){
$http.get("data/data.json").then(
function success(response) {
$scope.schema = angular.fromJson(response.data);
},
function error(response) { /* handle error */ });
// do other stuff
});
如何将从服务器获得的数据填充到我创建的现有表单中?
angular 模式表单如何做到这一点?
正在猜测您的数据。来自 $http。你可以做到这一点。对不起虚拟机。 我总是使用 controllerAs。
//已编辑我为您添加了 $http 的功能示例。
var app = angular.module('plunker', ['schemaForm']);
app.controller('MainCtrl', function($scope) {
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;
});
};
});
HTML
<!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>
data.json
{
"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
}
}
这是新的plnkr
编辑模式的关键在于服务器的响应加上表单和架构,您需要输入 vm.model,并记住模型需要符合架构属性。