AngularJS 动态表单，如何将架构组件放置在 html 中的所需位置

Question

我使用 angular schemaform 创建了以下模式。但我希望名字进入 div1，年龄进入 div2。请帮我看看怎么做。

$scope.schema = {
            type: "object",
            properties: {
                "name": {
                    "type": "string",
                    "title": "Name",
                    "required": true
                },
            
            
                "age": {
                    "type": "number",
                    "title": "Age"
                }
            }
               
          };
            
          $scope.form = [
            "*",
            {
              type: "submit",
              title: "Save"
            }
          ];

<div id="div1"></div>
<div id="div2"></div>

Answer 1

您可以使用 $scope.form 选项更改显示顺序

$scope.form = [{
        key : 'age'
    },
    {
        key : 'name'
    },
    {
        type : "submit",
        title : "Save"
    }];

希望这能解决您的问题

Answer 2

据我所知你想这样做

<div ng-repeat="value in schema.properties">
<div id="1">
<input type="text" placeholder="{{value.name.title}}" />
</div>
<div id="2">
<input type="Number" value='{{value.age.type}}'/>
</div>
</div>

Answer 3

玩这个 Plunker 片段：http://plnkr.co/edit/mpZrVO?p=preview

关键行在 index.html 的 <body> 标记中：<form sf-schema="schema" sf-form="form" sf-model="model"></form>。最好将每个 schema/form 的样式作为一个整体来保持 UI 的一致性，而不是两个 div。

确保在您的模块中包含正确的依赖项。

这是 app.js 的样子：

var app = angular.module('plunker', ['ngSanitize', 'schemaForm']);
app.controller('MainCtrl', function($scope) {
  $scope.schema = {
    "type": "object",
    "properties": {
      "name": {
        "type": "string",
        "title": "Name",
        "required": true
      },
      "age": {
        "type": "number",
        "title": "Age"
      }
    }

  };

  $scope.form = [
    "*", {
      type: "submit",
      title: "save"
    }
  ];

  $scope.model = {};
});

Answer 4

我是 ASF 项目的成员之一。这里有 3 种方式。

正如人们在上面提到的，一种方法是制作自定义模板（或我们所说的装饰器）。
第二个是使用实验功能manual field insertion.（可以很好地工作）
第三种方法有点老套，但操作起来很快。即运行多个具有相同架构和模型但拆分表单定义的 ASF 实例。

JS（简体）：

  $scope.schema = {
    "type": "object",
    "properties": {
      "name": {
        "type": "string",
        "title": "Name",
        "required": true
      },
      "age": {
        "type": "number",
        "title": "Age"
      }
    }

  };

  $scope.formOne = [
    "name"
  ];

  $scope.formTwo = [
    "age"
  ];

  $scope.model = {};

而 html 会是这样的：

<div id="div1">
  <form sf-schema="schema" sf-form="formOne" sf-model="model"></form>
</div>
<div id="div2">
  <form sf-schema="schema" sf-form="formTwo" sf-model="model"></form>
</div>

AngularJS 动态表单，如何将架构组件放置在 html 中的所需位置

AngularJS dynamic forms, how to place schema component at required location in html

angularjs

angular-schema-form