Angular Schema Form从JSON载入数据

我是一名硬件工程师，尝试创建一个内部软件工具。我认为我可以很容易地做到这一点，但是对于我来说有很多未知因素需要进步。Angular Schema Form从JSON载入数据

我正在尝试创建一个用于管理订单的内部软件解决方案。我已经定义了一个有效的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> \t \t 
 

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

 

 
</script> 
 
    
 
<script> 
 

 
/* 
 
$.getJSON("data/order.json", function(orderTemplateJson) { 
 
    console.log(orderTemplateJson); // this will show the info it in firebug console 
 
\t $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文件的数据预加载表单？

谢谢。

/马丁

来源

2016-01-20 Martin Lindskog

虽然采用了棱角分明这是很好的做事情的角度的方式。所以首先，你应该使用angular的$ http加载文件，而不是jQuery的$.getJSON。因此，在你的控制器，你可以这样做：

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 
});

然后角$http API reference将有助于

还有其他事情要考虑采用了棱角分明但它是值得投入一些时间来熟悉角方式和效益从它相对较快。

更有帮助的是使用$resource而不是$http，因为它专门用于处理json（实际上是REST）。

来源

2016-01-20 15:55:15 ciekawy

工作就像一个魅力，非常感谢你！我一定会研究角度概念，这是我需要的方向。 –

Angular Schema Form从JSON载入数据

回答

相关问题