[英]AngularJS binding to nested model properties
我們構建了一個動態表單指令,它從服務器獲取元數據,然后動態構建表單。 渲染的輸入綁定到與元數據分開的Model
對象。 為了實現這一目標,我們正在做這樣的事情:
<input type="field.Type"
ng-model="Model[field.Name]"
ng-repeat="field in metadata.Fields" />
假設上面的標記工作(好吧,它確實 - 在一個簡單的場景中)並且綁定按預期工作。 不幸的是,當我們使用的模型不是標量屬性的集合時,它都會中斷。 例子包括:
正如您所看到的,當我有一個嵌套屬性和/或當我有一個我需要綁定的列表時,會出現問題,這顯然是一種正常的行為,因為我們使用Model[propertyName]
表示法來實現動態捆綁。
我已經考慮過自己解析來自服務器的表達式並沿着模型的層次結構(嵌套屬性)走下去並弄清楚綁定,但我還是不能正確(尚未)。 此外,我仍然沒有想到什么時候我將解決列表/數組綁定問題。
有什么想法嗎?
我不確定您是否嘗試從模型中獲取列表屬性,或者您是否嘗試創建動態集模型 ?
對於不太困難的list屬性,只需將數組附加到模型,甚至可以使用list屬性附加一些對象。
多種模式
或者您是否希望使用多個“模型”?
function MyCtrl($scope, $filter)
{
$scope.Model = {
SubModel : {
// Submodel stuff
},
FooModel : {
// Submodel stuff
}
}
}
編輯:
我完全錯過了我第一次嘗試的問題。 問題確實想根據屬性的類型呈現不同的內容(如果這不是你想要的我道歉) Plunker示例
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; }
所以我最終不得不在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;
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.