从服务器获取现有数据并以 angular 模式形式使用它

Question

我有一个使用 angular 架构表单创建的表单，我已将其发布到服务器。我现在想编辑我发布的数据。我可以得到这样的数据 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
});

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

angular 模式表单如何做到这一点？

Answer 1

正在猜测您的数据。来自 $http。你可以做到这一点。对不起虚拟机。我总是使用 controllerAs。

//已编辑我为您添加了 $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，并记住模型需要符合架构属性。

从服务器获取现有数据并以 angular 模式形式使用它

Getting existing data from the server and using it in angular schema form

angularjs

angular-schema-form