使JSON数组从动态表单数据角度

-1

我有一个角度的动态形式。我想发送响应为json。我如何从窗体生成JSON？使JSON数组从动态表单数据角度

这里是完整的代码，我必须得到json，并将其发布到一些api。

<!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怎么样？ – itaintme

建议你学习一些教程。 Stackoverflow不是教程服务 – charlietfl

在AngularJs我们使用NG-模式为输入值绑定到我们的控制器，样品：

这全样本弄清楚如何创建一个简单的形式，从数组以及如何将它作为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数组从动态表单数据角度

回答

相关问题