3

我使用角度模式创建了以下模式。但我希望名字进入 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>

4

4 回答 4

2

我是从事 ASF 项目的人之一。有3种方式可以去这里。

  1. 正如人们上面提到的，一种方法是制作自定义模板（或我们称之为装饰器）。

  2. 二是使用实验功能手动字段插入。（可以很好地工作）

  3. 第三种方式有点hackish，但做起来很快。即运行多个具有相同架构和模型但拆分表单定义的 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>
于 2015-06-11T06:32:02.847 回答
0

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

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

我希望这能解决你的问题

于 2015-06-10T05:46:23.010 回答
0

据我说你想这样做

<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>
于 2015-06-10T05:48:22.220 回答
0

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

关键行在:的<body>标记中。最好将每个模式/表单设置为一个整体以保持 UI 一致，而不是两个 div。index.html<form sf-schema="schema" sf-form="form" sf-model="model"></form>

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

这是看起来的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 = {};
});
于 2015-06-10T06:01:21.603 回答