Vorhandene Daten vom Server erhalten und in Winkelschemaform verwenden

Ich habe ein Formular, das ich mit Winkelschemaform erstellt habe, und ich habe es auf dem Server veröffentlicht. Ich möchte jetzt die Daten bearbeiten, die ich gepostet habe. Ich kann die Daten, wie dies für isntance bekommenVorhandene Daten vom Server erhalten und in Winkelschemaform verwenden

app.controller('FormController', function($scope,$http){ 
    $http.get("data/data.json").then(
     function success(response) { 
     $scope.schema = angular.fromJson(response.data); 
     }, 
     function error(response) { /* handle error */ }); 
    // do other stuff 
});

Wie füllen wir die Daten i vom Server an die bestehenden Formen, die ich erstellt habe ?.

Wie macht das angulare Schema dies ?.

Quelle

2017-07-29 Anonymous

was ist die JSON-Antwort. ? und können Sie Ihr HTML-Formular posten. –

Erraten Sie Ihre Daten. von der $ http. Du könntest das tun. Entschuldigung für die VM. ich verwende immer controllerAs.

// Bearbeitet Ich habe die Funktionalität des $ http für Sie Beispiel hinzugefügt.

var app = angular.module('plunker', ['schemaForm']); 

    app.controller('MainCtrl', function($scope) { 
     var vm = this; 

     vm.form = [ 
     "*", 
     { 
      "type": "submit", 
      "title": "OK" 
     } 
     ]; 

     vm.schema = { 
     "type": "object", 
     "title": "Types", 
     "properties": { 
      "string": { 
      "type": "string", 
      "minLength": 3 
      }, 
      "integer": { 
      "type": "integer" 
      }, 
      "number": { 
      "type": "number" 
      }, 
      "boolean": { 
      "type": "boolean" 
      } 
     }, 
     "required": [ 
      "number" 
     ] 
     }; 

     vm.model = {boolean: true, string:'abc', integer:1234, number:3.1416}; 

     vm.loadData = function(){ 
      $http({ 
      method:'GET', 
      url:'data.json' 
      }).then(function(response){ 
      var data = response.data; 
      vm.form = data.form; 
      vm.schema = data.schema; 
      vm.model = data.model; 
      }); 
     }; 

    });

HTML

<!DOCTYPE html> 
    <html ng-app="plunker"> 

    <head> 
     <meta charset="utf-8" /> 
     <title>AngularJS Plunker</title> 
     <script>document.write('<base href="' + document.location + '" />');</script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

     <link rel="stylesheet" href="style.css" /> 
     <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.11/angular-sanitize.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script> 
     <script src="objectPath.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tv4/1.3.0/tv4.min.js"></script> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-schema-form/0.8.13/schema-form.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-schema-form/0.8.13/bootstrap-decorator.js"></script> 
     <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl as vm"> 
     <form sf-schema="vm.schema" sf-form="vm.form" sf-model="vm.model"></form> 

     <pre>{{vm.model}}</pre> 
       <button class="btn btn-default" ng-click="vm.loadData()">Other Schema</button> 

    </body> 

    </html>

data.json

{ 
    "form": 
    [ 
     "*", { 
      "type": "submit", 
      "title": "OK", 
      "style": "btn-success" 
     } 
     ], 
    "schema":{ 
     "type": "object", 
     "title": "Types", 
     "properties": { 
      "name": { 
      "type": "string", 
      "minLength": 3 
      }, 
      "lastName": { 
      "type": "string" 
      }, 
      "age": { 
      "type": "number" 
      }, 
      "boolean": { 
      "type": "boolean" 
      } 
     }, 
     "required": [ 
      "number" 
     ] 
     }, 
    "model":{ 
     "boolean": true, 
     "name": "john", 
     "lastName": "Doe", 
     "age": 34 
     } 

}

das ist der neue plnkr

Der Schlüssel für den Bearbeitungsmodus in Ihrer Antwort ist Vom Server plus Formular und Schema müssen Sie das vm.model ablegen und sich daran erinnern, dass das Modell mit den Schemaattributen übereinstimmen muss.

Quelle

2017-07-29 19:23:48

Hallo, ich habe keinen Zugriff auf das HTML wie das seit IRS generiert von Schema-Formular. Wenn Sie das Schema Formular Repo Beispiel schauen, werden Sie sehen, was ich meine. –

Das Beispiel benötigt das FORM json Format, und SCHEMA json können Sie beide teilen. –

Das ist der eine. Nehmen Sie einfach die Schema- und Formularobjekte aus der jsfiddle-ähnlichen Umgebung in den Beispielen. –

Vorhandene Daten vom Server erhalten und in Winkelschemaform verwenden

Antwort

Verwandte Themen