我正在尝试使用angular schema表单框架创建一个简单的"位置编辑器"。计划是用一个可拖动的pin构建一个地图编辑器小部件。
该项的json模式相对简单:
location: {
title: "Location",
type: "object",
format: "location",
properties: {
latitude: {
"type": "number"
},
longitude: {
"type": "number"
}
}
}
就我所知:http://plnkr.co/edit/tnSdxwrEmRYMNKFzep9f?p=preview
正如您所看到的,编辑名称可以很好地工作,但编辑两个位置字段中的任何一个都不会更新模型(除非清除输入),并且验证只发生在两个输入元素中的第二个上。
我不知道下一步该去哪里看——我找不到任何其他对象编辑器的例子(github上的所有例子都涉及编辑单个"字符串"项)。
这是否得到支持?如果得到支持,我哪里出了问题?
干杯!
在花了更多的时间之后,我成功地设置了对象编辑器来映射子属性。
在编辑器扩展代码中,我遍历模式属性,将它们添加到表单对象中,然后可以将它们映射到angular 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>
我不知道这是否是正确的方法,但它对我的目的有效。