使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數組從動態表單數據角度

回答

相關問題