Question

我有一个使用角度架构表单创建的表单，我已将其发布到服务器。我现在想要编辑我发布的数据。我可以获得像isntance这样的数据

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
});

如何将从服务器获取的数据填充到我创建的现有表单中？。

角度架构表单如何做到这一点？。

Answer 1

猜测您的数据。来自$ http。你可以做到这一点。抱歉vm。我总是使用控制器。

//编辑我为你添加了$ http的功能。

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="angular.js@1.5.x" 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
      }

}

这是新的plnkr

编辑模式的关键在于来自服务器的响应以及表单和架构，您需要放置vm.model，并记住模型需要适合架构属性。

从服务器获取现有数据并以角度架构形式使用

1 个答案: