Question

我使用angular schemaform创建了以下模式。但我希望名字在div1和年龄去div2。请帮我解决一下这个问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我是ASF项目的负责人之一。有三种方法可以去。

正如人们上面提到的，一种方法是制作自定义模板（或我们称之为装饰器）。
第二个是使用实验性功能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>

Answer 2

您可以使用$scope.form选项

更改显示顺序

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

我希望，这将解决您的问题

Answer 3

据我说你想这样做

li{
   width: 100px;
   overflow: hidden;
   white-space: nowrap;
}

Answer 4

使用此Plunker代码段：http://plnkr.co/edit/mpZrVO?p=preview

关键行位于<body>的{{1}}标记中：index.html。最好将每个模式/表单设置为一个整体，以保持UI一致，而不是两个div。

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

以下是<form sf-schema="schema" sf-form="form" sf-model="model"></form>的样子：

app.js

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

4 个答案: