gpt4 book ai didi

javascript - Angular Schema 表单从 JSON 加载数据

转载 作者:行者123 更新时间:2023-11-27 23:26:47 25 4
gpt4 key购买 nike

我是一名硬件工程师,正在尝试创建一个内部软件工具。我以为我能够很容易地做到这一点,但有太多的未知因素让我无法进步。

我正在尝试创建一个用于管理订单的内部软件解决方案。我已经定义了一个有效的 JSON 架构。

我想建立一个网页,可以通过填写网络表单来创建新订单。然后,数据应存储为 JSON 文本文件。我还希望能够加载 JSON 文本文件,使用当前值预填充表单,进行一些更改,然后保存更改。

我在 php 和 mysql 中做过类似的事情,但我想使用 JSON 文件来更改软件工具,而不必摆弄数据库结构。我也认为这是一个很好的学习机会。

我正在尝试使用自动生成的表单(schemaform.io),并且我已经得到了以下代码:

<!DOCTYPE html>
<html >

<head>

</head>

<body ng-app="test" ng-controller="FormController">

<form name="ngform"
sf-schema="schema"
sf-form="form"
sf-model="model"></form>

<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
<script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="../bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="../bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="../bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>


</script>

<script>

/*
$.getJSON("data/order.json", function(orderTemplateJson) {
console.log(orderTemplateJson); // this will show the info it in firebug console
$scope.$broadcast('schemaFormRedraw')
});
*/

var app = angular.module('test',['schemaForm']);
app.controller('FormController', function($scope,$http){
$scope.schema = {
// A long long string of text goes here
};

$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];

$scope.model = {};
})
</script>

</body>

</html>

我现在想从文件加载 JSON 架构。我尝试将代码移至 getJSON 调用的回调中,但收到以下错误消息:

未捕获错误:[$injector:modulerr] 无法实例化模块测试,原因是:错误:[$injector:nomod] 模块“测试”不可用!您要么拼错了模块名称,要么忘记加载它。如果注册模块,请确保将依赖项指定为第二个参数。

$.getJSON("data/order.json", function(orderTemplateJson) {
console.log(orderTemplateJson);

//Moved all the angular module code to here
});

我尝试过各种方法,但问题可能是我并不真正知道自己在做什么。任何帮助将不胜感激。

另外,有谁知道如何使用包含数据(并适合架构)的 JSON 文件中的数据预加载表单吗?

谢谢你..

/马丁

最佳答案

使用 Angular 时,以 Angular 方式做事是很好的。所以第一件事是你应该使用 Angular 的 $http 来加载文件而不是 jQuery 的 $.getJSON 。所以在你的 Controller 中你可以这样做:

app.controller('FormController', function($scope,$http){
$http.get("data/order.json").then(
function success(response) {
// please note that as this is asynchronous,
// the $scope.schema will be available after response
// has been received but this should be ok
$scope.schema = angular.fromJson(response.data);
},
function error(response) { /* handle error */ });
// do other stuff
});

然后有 Angular $http API reference会有帮助的

使用 Angular 还需要考虑其他事情,但是值得花一些时间来熟悉 Angular 方式并相对快速地从中受益。

使用 $resource 会更有帮助。而不是 $http,因为它专用于处理 json(实际上是 REST)。

关于javascript - Angular Schema 表单从 JSON 加载数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34904187/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com