Javascript AngularJS绑定到嵌套模型属性
我们构建了一个动态表单指令,该指令从服务器获取元数据,然后动态构建表单。呈现的输入绑定到与元数据分离的Javascript AngularJS绑定到嵌套模型属性,javascript,angularjs,data-binding,angularjs-scope,Javascript,Angularjs,Data Binding,Angularjs Scope,我们构建了一个动态表单指令,该指令从服务器获取元数据,然后动态构建表单。呈现的输入绑定到与元数据分离的模型对象。为了实现这一目标,我们正在做如下工作: <input type="field.Type" ng-model="Model[field.Name]" ng-repeat="field in metadata.Fields" /> 假设上面的标记是有效的(在一个简单的场景中是有效的),并且绑定按照预期工作。不幸的是,当我们使用的模型不是标量
模型
对象。为了实现这一目标,我们正在做如下工作:
<input type="field.Type"
ng-model="Model[field.Name]"
ng-repeat="field in metadata.Fields" />
假设上面的标记是有效的(在一个简单的场景中是有效的),并且绑定按照预期工作。不幸的是,当我们使用的模型不是标量属性的集合时,这一切都会中断。例子包括:
- 测量Id
- 维度[0]。已选择属性
模型[propertyName]
符号来实现动态绑定
我曾经考虑过自己解析来自服务器的表达式,然后遍历模型的层次结构(嵌套属性)并找出绑定,但是我还没有弄清楚。此外,我还没有考虑解决列表/数组绑定问题的时间
有什么想法吗?我不太确定您是在尝试从模型中获取列表属性,还是在尝试创建列表属性 对于列表属性来说,这不是很难,只要在模型中附加一个数组,甚至用列表属性附加一些对象即可
多模型 或者,您是否希望使用多个“模型”
function MyCtrl($scope, $filter)
{
$scope.Model = {
SubModel : {
// Submodel stuff
},
FooModel : {
// Submodel stuff
}
}
}
编辑:
我第一次尝试时完全没有抓住问题的关键。这个问题真的想根据属性的类型呈现不同的内容(如果这不是您想要的,我道歉)
HTML
所以我不得不在JavaScript代码中创建HTML,而不是使用HTML模板。。。诸如此类:
FormBuilder.prototype.getAtomField = function (field) {
var self = this;
var atom = '<atom type="field.Type" name="field.Title" data-ng-show="field.Visible || evaluateExpression(field.VisibleIf)" hidevalidation="field.HideValidation" withlabel="field.WithLabel"'
+ 'datavalue="' + self.getDataValueBindingExpression(field.Name) + '" class="field.ClassName" required="field.Required || evaluateExpression(field.RequiredIf)"'
+ 'enabled="(field.Enabled || evaluateExpression(field.EnabledIf))" watermark="field.Watermark" orientation="field.Orientation" example="field.Example" modelkey="api.getFieldModelKey(field.Name)"'
+ 'min="field.Min" max="field.Max" description="field.Description" suggestedvalues="field.SuggestedValues" limittosuggestions="field.LimitToSuggestions" multiple="field.Multiple"'
+ 'displaypath="field.DisplayPath" valuepath="field.ValuePath" remoteurl="field.RemoteUrl" changehandler="invokeAction" changehandlerparam="field.ChangeHandler"'
+ 'source="field.Source" sourcefilter="field.SourceFilter" groupnamepath="field.GroupNamePath" disabledpath="field.DisabledPath" iconpath="field.IconPath"'
+ 'toggle="field.Toggle" formatresult="field.FormatResult" formatselection="field.FormatSelection" requestdatamapper="field.RequestDataMapper"'
+ 'responsedatamapper="field.ResponseDataMapper" pagelimit="field.PageLimit" remotedatatype="field.RemoteDataType" eagersearch="field.EagerSearch"'
+ 'numberofdigits="field.NumberOfDigits" step="field.Step" format="api.evaluateRegexExpression(field.Format, field.Type)"></atom>';
return atom;
};
显然,你没有理解我问题的重点。在来自服务器的数据中,我不知道某个属性是否是列表,我只知道它是一个属性(在客户端,更具体地说是在HTML中)。主模型中的嵌套模型是我还需要解决的另一个问题。因此,简而言之,我需要一种方法来正确传递
ng模型的绑定表达式,以满足所有提到的场景。@Kassem Fixed我相信这就是你想要的。我在这方面看到的唯一问题是,你说客户是知道哪个属性的人。我将对此进行一些更改以创建
function MyCtrl($scope, $filter)
{
// Configuration Object
$scope.Configuration = {
debug : true,
// Log Levels
levels : [
new Level("log", 0),
new Level("warning", 1),
new Level("error", 2)
]
// levels : "hello world"
};
$scope.Configuration.hasLevels = ($scope.Configuration.levels instanceof Array);
}
function Level(name, severity) { this.name = name; this.severity = severity; }
FormBuilder.prototype.getAtomField = function (field) {
var self = this;
var atom = '<atom type="field.Type" name="field.Title" data-ng-show="field.Visible || evaluateExpression(field.VisibleIf)" hidevalidation="field.HideValidation" withlabel="field.WithLabel"'
+ 'datavalue="' + self.getDataValueBindingExpression(field.Name) + '" class="field.ClassName" required="field.Required || evaluateExpression(field.RequiredIf)"'
+ 'enabled="(field.Enabled || evaluateExpression(field.EnabledIf))" watermark="field.Watermark" orientation="field.Orientation" example="field.Example" modelkey="api.getFieldModelKey(field.Name)"'
+ 'min="field.Min" max="field.Max" description="field.Description" suggestedvalues="field.SuggestedValues" limittosuggestions="field.LimitToSuggestions" multiple="field.Multiple"'
+ 'displaypath="field.DisplayPath" valuepath="field.ValuePath" remoteurl="field.RemoteUrl" changehandler="invokeAction" changehandlerparam="field.ChangeHandler"'
+ 'source="field.Source" sourcefilter="field.SourceFilter" groupnamepath="field.GroupNamePath" disabledpath="field.DisabledPath" iconpath="field.IconPath"'
+ 'toggle="field.Toggle" formatresult="field.FormatResult" formatselection="field.FormatSelection" requestdatamapper="field.RequestDataMapper"'
+ 'responsedatamapper="field.ResponseDataMapper" pagelimit="field.PageLimit" remotedatatype="field.RemoteDataType" eagersearch="field.EagerSearch"'
+ 'numberofdigits="field.NumberOfDigits" step="field.Step" format="api.evaluateRegexExpression(field.Format, field.Type)"></atom>';
return atom;
};
FormBuilder.prototype.getDataValueBindingExpression = function (name) {
var self = this;
return 'api.description.Model.' + name;
};