2017-03-20 4 views
0

Nach dem Klicken auf "Formular erhalten" Schaltfläche eine Anfrage an das Formular api gemacht werden und das Formular mit den Informationen in der Antwort erhalten gerendert.Nachdem das Formular gerendert wird, muss der Benutzer in der Lage sein, "FORM FORMULIEREN". Und auch der Benutzer sollte diesen Vorgang wiederholen dürfen. HTML:Erstellen Sie dynamische HTML-Formular mit JSON-Daten?

<body ng-app="JsonApp"> 
<div ng-controller="JsonCtrl" style="margin: 200px;"> 
<button type="button" class="btn btn-success center-block" ng-click="JsonData()">GET FORM</button> 
</div> 
</body> 

Angular JavaScript

app = angular.module('JsonApp', []); 

app.controller('JsonCtrl', function ($scope,$http) { 
     console.log("*************Entered into getJSON(): *************"); 

    $scope.JsonData = function() { 
     $http.get("https://randomform.herokuapp.com/") 

      .then(function(response) { 

       console.log("getJSON data is :: ", response.data); 
      }); 
    }; 

response.data: (json-Format)

{ 
    "Data": { 
     "Form_fields": [ 
      { 
       "Autofill": "that other", 
       "Component": "textinput", 
       "Description": "competition hateth, because that will have to be chosen here", 
       "Editable": false, 
       "Label": "nothing to complain", 
       "Required": true, 
       "Validation": "^. + $" 
      }, 
      { 
       "Autoselect" :[ 
        "Takes pains because" 
       ], 
       "Component": "radio", 
       "Description": "are not those who are provident excepteur who", 
       "Editable": false, 
       "Label": "Duis him of them", 
       "Options": [ 
        "Some of these", 
        "Takes pains because" 
       ], 
       "Required": true 
      }, 
      { 
       "Component": "textareas", 
       "Description": "all the pains of rejecting it are lorem", 
       "Editable": true, 
       "Label": "pleasure as a", 
       "Required": true, 
       "Validation": "^ [a-zA-Z1-9 \\ s] + $" 
      }, 
      { 
       "Component": "select", 
       "Description": "when an obstacle to cupidatat, however, believe that the life of a wise", 
       "Editable": true, 
       "Label": ", which is not cillum", 
       "Options": [ 
        "Pains explain", 
        "Itself", 
        "Them", 
        "Practice to come", 
        "They are" 
       ], 
       "Required": false 
      }, 
      { 
       "Component": "select", 
       "Description": "there is something which is the order of things be dolor consequat", 
       "Editable": true, 
       "Label": "When the choice was accepted", 
       "Options": [ 
        "And", 
        "Not certain", 
        "We consider them", 
        "They pay labor" 
       ], 
       "Required": true 
      }, 
      { 
       "Component": "textareas", 
       "Description": ", and that the choice of, and the duties", 
       "Editable": true, 
       "Label": "ecological soul", 
       "Required": true, 
       "Validation": "^ (. | \\ N) + $" 
      } 
     ], 
     "Form_id": "2hUnEy6tqUXG", 
     "FORM_NAME": "in order to make the distinction" 
    }, 
    "Success": true 
} 

nicht mehr gehen, wie JSON-Daten verwenden, für das Rendern HTML-Formular.

Antwort

Verwandte Themen