Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/json/14.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 角度模式表单-自定义对象编辑器_Javascript_Json_Angularjs_Jsonschema_Angular Schema Form - Fatal编程技术网

Javascript 角度模式表单-自定义对象编辑器

Javascript 角度模式表单-自定义对象编辑器,javascript,json,angularjs,jsonschema,angular-schema-form,Javascript,Json,Angularjs,Jsonschema,Angular Schema Form,我正在尝试使用angular schema表单框架创建一个简单的“位置编辑器”。计划是构建一个带有可拖动pin的地图编辑器小部件 该项的json模式相对简单: location: { title: "Location", type: "object", format: "location", properties: { latitude: { "type": "number" }, longi

我正在尝试使用angular schema表单框架创建一个简单的“位置编辑器”。计划是构建一个带有可拖动pin的地图编辑器小部件

该项的json模式相对简单:

location: {
    title: "Location",
    type: "object",
    format: "location",
    properties: {
        latitude: {
            "type": "number"
        },
        longitude: {
            "type": "number"
        }
    }
}
就我所知:

如您所见,编辑名称工作正常,但编辑两个位置字段中的任何一个都不会更新模型(除非清除输入),并且验证只在两个输入元素中的第二个上进行

我不确定下一步该去哪里——我找不到任何其他对象编辑器的示例(github上的所有示例都涉及编辑单个“字符串”项)

这是否得到支持?如果是,我哪里做错了


干杯

花了一些时间之后,我成功地设置了对象编辑器来映射子属性

在编辑器扩展代码中,我遍历模式属性以将它们添加到表单对象,然后可以将它们映射到html模板中

以下是添加的js代码:

var location = function(name, schema, options) {
  if (schema.type === 'object' && schema.format === 'location') {
    var f = schemaFormProvider.stdFormObj(name, schema, options);
    f.key  = options.path;
    f.type = 'location';
    options.lookup[sfPathProvider.stringify(options.path)] = f;

    // ADDED THIS BIT:
    // map the schema properties to form properties
    f.properties = {};
    angular.forEach(schema.properties, function(v, k) {
      var path = options.path.slice();
      path.push(k);
      if (options.ignore[sfPathProvider.stringify(path)] !== true) {
        var required = schema.required && schema.required.indexOf(k) !== -1;

        var def = schemaFormProvider.defaultFormDefinition(k, v, {
          path: path,
          required: required || false,
          lookup: options.lookup,
          ignore: options.ignore
        });
        if (def) {
          f.properties[k] = def;
        }
      }
    });

    return f;
  }
};
schemaFormProvider.defaults.object.unshift(location);
HTML模板(输入类型为='number'而不是'text')现在如下所示:

<div class="form-group" ng-class="{'has-error': hasError()}">

  <label class="control-label" ng-show="showTitle()">{{form.title}}</label>

      <input ng-show="form.properties.latitude.key"
             style="background-color: white"
             type="number"
             class="form-control"
             schema-validate="form.properties.latitude"
             ng-model="$$value$$.latitude" />

      <input ng-show="form.properties.longitude.key"
             style="background-color: white"
             type="number"
             class="form-control"
             schema-validate="form.properties.longitude"
             ng-model="$$value$$.longitude" />

  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>

</div>

{{form.title}
{{(hasError()&&errorMessage(schemaError())| | form.description}}
我不知道这是否是正确的方法,但它符合我的目的