JSON的角度架構表單加載數據

Question

我是一位試圖創建內部軟件工具的硬件工程師。 我以為我可以很輕松地做到這一點，但是我有很多未知的東西要進步。

我正在嘗試創建用於管理訂單的內部軟件解決方案。 我定義了一個有效的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]模塊'test'不可用！ 您可能拼錯了模塊名稱，或者忘記了加載它。 如果注冊模塊，請確保將依賴項指定為第二個參數。

 $.getJSON("data/order.json", function(orderTemplateJson) { console.log(orderTemplateJson); //Moved all the angular module code to here });

我已經嘗試過各種方法，但是問題可能出在我真的不知道自己在做什么。任何幫助將不勝感激。

另外，是否有人對我如何使用包含數據（並適合架構）的JSON文件中的數據預加載表單有任何指示？

謝謝..

/馬丁

Answer 1

在使用角度時，最好以角度方式進行操作。 因此，第一件事是您應該使用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參考會有所幫助

還有其他一些考慮因素可以考慮使用角度，但是值得花一些時間來熟悉角度方法並從中快速受益。

更加有用的是使用$resource而不是$http因為它專用於處理json（實際上是REST）。

JSON的角度架構表單加載數據

問題描述

1 個解決方案

解決方案1
1 已采納 2016-01-20 15:55:15

JSON的角度架構表單加載數據

問題描述

1 個解決方案

解決方案1 1 已采納 2016-01-20 15:55:15

解決方案1
1 已采納 2016-01-20 15:55:15