从动态表单数据角度生成JSON数组

时间:2017-05-14 11:41:59

标签: angularjs 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>

1 个答案:

答案 0 :(得分:0)

  

AngularJs 中,我们使用 ng-model 将输入值绑定到我们的控制器示例

     

这个完整的示例来说明如何从数组创建一个简单的表单以及如何将它作为JSON发送到您的API。

     

注意:在提交时检查您的控制台,并查看对象值。

&#13;
&#13;
.directive('planText', function(){
      return {
        restrict:'E',
        templateUrl: 'app/partials/planText.html',
        link: function(scope, element, attrs){

          element.find("ul").bind('keydown', function(event){
            console.log("keydown event");
          if (event.keyCode == 8) {
            // console.log("backspace pressed");
            if ($(this).children().length == 1 && $(this).children("li").text().split("").length == 0) {
                console.log("stop li removal");
                event.preventDefault();
            }
          }
        });
        element.find("ul").bind('focus', function(event){
            if ($(this).children().length ==0 ) {
                console.log("insert li");
                $(this).append("<li></li>");
            }
        });
        }
      }
})
&#13;
C:\Users\mac>cd c:\
c:\>winutils\bin\winutils.exe chmod 777 \tmp\hive
c:\>cd c:\spark
c:\Spark>spark-shell


Using Spark's default log4j profile: org/apache/spark/log4j-defaults.properties
Setting default log level to "WARN".
To adjust logging level use sc.setLogLevel(newLevel). For SparkR, use setLogLevel(newLevel).
17/05/14 13:21:25 WARN NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable
17/05/14 13:21:34 WARN General: Plugin (Bundle) "org.datanucleus.store.rdbms" is already registered. Ensure you dont have multiple JAR versions of the same plugin in the classpath. The URL "file:/c:/Spark/bin/../jars/datanucleus-rdbms-3.2.9.jar" is already registered, and you are trying to register an identical plugin located at URL "file:/C:/Spark/jars/datanucleus-rdbms-3.2.9.jar."
17/05/14 13:21:34 WARN General: Plugin (Bundle) "org.datanucleus" is already registered. Ensure you dont have multiple JAR versions of the same plugin in the classpath. The URL "file:/c:/Spark/bin/../jars/datanucleus-core-3.2.10.jar" is already registered, and you are trying to register an identical plugin located at URL "file:/C:/Spark/jars/datanucleus-core-3.2.10.jar."
17/05/14 13:21:34 WARN General: Plugin (Bundle) "org.datanucleus.api.jdo" is already registered. Ensure you dont have multiple JAR versions of the same plugin in the classpath. The URL "file:/c:/Spark/bin/../jars/datanucleus-api-jdo-3.2.6.jar" is already registered, and you are trying to register an identical plugin located at URL "file:/C:/Spark/jars/datanucleus-api-jdo-3.2.6.jar."
17/05/14 13:21:48 WARN ObjectStore: Failed to get database global_temp, returning NoSuchObjectException
Spark context Web UI available at http://192.168.1.9:4040
Spark context available as 'sc' (master = local[*], app id = local-1494764489031).
Spark session available as 'spark'.
Welcome to
      ____              __
     / __/__  ___ _____/ /__
    _\ \/ _ \/ _ `/ __/  '_/
   /___/ .__/\_,_/_/ /_/\_\   version 2.1.1
      /_/

Using Scala version 2.11.8 (Java HotSpot(TM) 64-Bit Server VM, Java 1.8.0_131)
Type in expressions to have them evaluated.
Type :help for more information.
&#13;
&#13;
&#13;