動的フォームデータからJSON配列を作成する

-1

私は動的な形を角度で持っています。私はjsonとして応答を送信したいと思います。フォームからJSONを生成するにはどうすればよいですか？動的フォームデータからJSON配列を作成する

ここに完全なコードがあります.Jsonを取得して、いくつかのAPIに投稿する必要があります。から、簡単なフォームを作成する方法を見つけ出すために

この完全なサンプル：AngularJs我々は、コントローラ、サンプルへの入力値をバインドするNG-モデルを使用で

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="dyf" ng-submit="submit()"> 

<form name="userFormOne" novalidate> 
    <table> 
     <tr class="form-group" ng-repeat="x in names"> 

     <td><label>{{ x.Field }}</label> 
     </td><td><input type="text" class="form-control" placeholder="{{x.Comment}}" required> 
     </td> 
     </tr> 
    </table>{{data}} 
    </form> 

</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('dyf', function($scope, $http) { 
    $http.get("http://localhost:5000/gu") 
    .then(function (response) {$scope.names = response.data;console.log(response.data);}); 

    $scope.data ={}; 



}); 


</script> 

</body> 
</html>

出典

2017-05-14 itaintme

使用[NGモデル（https://docs.angularjs.org/api/ng/directive/ngModel）データモデルに入力コントロールを結合します。次にモデルオブジェクトをサーバに送信します – charlietfl

@charlietfl how？ – itaintme

チュートリアルを勉強することをお勧めします。 Stackoverflowはチュートリアルサービスではありません – charlietfl

JSONとしてAPIに送信する方法について説明します。

注：投稿時にコンソールを確認し、オブジェクト値を確認してください。

var app = angular.module("app", []); 
 

 
     app.controller("ctrl", 
 
      function ($scope) { 
 

 
       var options = [ 
 
        { name: "a" }, 
 
        { name: "b" }, 
 
        { name: "c" } 
 
       ]; 
 

 
       $scope.names = [ 
 
        { id: 1, field: "insert name", name: "name", placeholder: "your name is", value:null, type:"text" }, 
 
        { id: 2, field: "insert phone", name: "phone", placeholder: "your phone is", value: null, type: "tel" }, 
 
        { id: 3, field: "insert age", name: "age", placeholder: "your age is", value: null, type: "number", min: 0, max: 20 }, 
 
        { id: 4, field: "select country", name: "country", placeholder: "your country is", value: null, type: "select", options: options } 
 
       ]; 
 

 
       $scope.sendMe = function() { 
 
        console.log($scope.names); 
 
       } 
 
      });

<!DOCTYPE html> 
 
<html ng-app="app" ng-controller="ctrl"> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 

 
</head> 
 
<body> 
 
    <form name="userFormOne" novalidate> 
 
     <table> 
 
      <tr class="form-group" ng-repeat="x in names"> 
 

 
       <td> 
 
        <label>{{ x.field }}</label> 
 
       </td> 
 
       <td ng-if="x.type != 'select'"> 
 
        <input type="{{x.type}}" min="{{x.min}}" max="{{x.max}}" ng-model="x.value" name="{{x.name}}" placeholder="{{x.placeholder}}" ng-required="true"> 
 
        {{x.value}} 
 
       </td> 
 
       <td ng-if="x.type == 'select'"> 
 
        <select ng-model="x.value" name="{{x.name}}" ng-options="item as item.name for item in x.options"> 
 
        </select> 
 
        {{x.value}} 
 
       </td> 
 
      </tr> 
 
     </table> 
 

 
     <button ng-disabled="userFormOne.$invalid" ng-click="sendMe()">sendMe</button> 
 
    </form> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    </body> 
 
</html>

出典

2017-05-14 12:23:13 Maher

動的フォームデータからJSON配列を作成する

答えて

関連する問題