嵌套模型属性的AngularJS绑定
我们构建了一个动态表单指令，它从服务器获取元数据，然后动态构建表单。呈现的输入绑定到与元数据分离的Model对象。为了达到这个目标，我们正在做这样的事情：
<input type="field.Type"
ng-model="Model[field.Name]"
ng-repeat="field in metadata.Fields" />假设上面的标记工作(嗯，它在一个简单的场景中)和绑定工作如预期的那样。不幸的是，当我们使用的模型不是标量属性的集合时，所有这些都会中断。示例包括：
- Measure.Id
- Dimensions.SelectedAttribute
如您所见，当我有一个嵌套属性和/或需要绑定到的列表时，问题就会发生，这显然是一种正常的行为，因为我们使用Model[propertyName]符号来实现动态绑定。
我考虑过自己解析来自服务器的表达式，然后遍历模型的层次结构(嵌套属性)，并找出绑定，但我无法正确处理(目前)。此外，我还没有想到要解决列表/数组绑定问题的时间。
有什么想法吗？
回答 2
Stack Overflow用户
发布于 2013-09-17 06:05:50
因此，我不得不在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;
};注意，atom只是一个与表单字段相当的包装器指令。这里执行此操作的部分是对self.getDataValueBindingExpression(field.Name)的调用，它只是正确地返回连接的字段名：
FormBuilder.prototype.getDataValueBindingExpression = function (name) {
var self = this;
return 'api.description.Model.' + name;
};Stack Overflow用户
发布于 2013-09-12 14:47:17
我不太确定您是试图从模型中获取list属性，还是试图创建一个动态集模型？
对于不太困难的list属性，只需将数组附加到模型中，甚至用list属性追加对象。
多模型
还是你想要使用多个“模型”？
function MyCtrl($scope, $filter)
{
$scope.Model = {
SubModel : {
// Submodel stuff
},
FooModel : {
// Submodel stuff
}
}
}编辑：
我完全忽略了问题的重点，我的第一次尝试。这个问题真的想根据属性的类型呈现不同的内容(如果这不是您想要的，我很抱歉) 柱塞实例
HTML
<div ng-app ng-controller="MyCtrl">
<div ng-if="Configuration.hasLevels">
<div ng-repeat="lvl in Configuration.levels">
<input type="textbox" value="{{lvl.severity}}">
{{lvl.name}}
</div>
</div>
<div ng-if="!Configuration.hasLevels">
no levels: {{Configuration.levels}}
</div>
</div>JavaScript
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; }https://stackoverflow.com/questions/18766777
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号