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載入數據

回答

相關問題