AngularJS ng-model 表单驱动的 ng-repeat over UI 模型描述数据如何? [英] AngularJS ng-model form driven by ng-repeat over UI model description data how to?
问题描述
JSFiddle http://jsfiddle.net/vorburger/hyCTA/3/ 说明我对 AngularJS 的(工作)UI 建模"想法;请注意,该表单实际上并未在 HTML 模板中编码,而是由 uimodel JSON 驱动(后者又描述了如何呈现/编辑数据模型):
<标签>{{$index + 1}}.{{auimodel.label}}</label><input ng-model="datamodel[auimodel.model]" type="{{auimodel.type}}"/>
问题是,只要我的模型"不是一个简单的属性,而是一个路径",那么我的方括号动态键技巧"当然就不再起作用了..如 (broken) http://jsfiddle.net/vorburger/8CxRC/1/ JSFiddle.任何建议如何做到这一点?
PS:或者这样的事情是否一定需要一个完整的自定义指令,而不是迟早?如果可能的话,我宁愿不必这样做,以便继续创作和创作.尽可能简单地维护这种 UI 模型元模板"...
我刚刚想出了一种(但可能不是最好的?)方法来实现这一目标.见 http://jsfiddle.net/vorburger/8CxRC/3/ - 基本上仍然基于我的方括号动态键'trick',但是进行一些预处理:
for (var i = 0; i <$scope.uimodel.length; i++) {var resolveModelProperty = $scope.datamodel;var剩余路径 = $scope.uimodel[i].model;while (remainingPath.indexOf('.') > -1) {var nextPathSlice = 剩余路径.substr(0, 剩余路径.indexOf('.'));解析模型属性 = 解析模型属性 [nextPathSlice];剩余路径 = 剩余路径.substr(remainingPath.indexOf('.') + 1);}$scope.uimodel[i].modelB =resolutionModelProperty;$scope.uimodel[i].modelL = 剩余路径;}
The JSFiddle http://jsfiddle.net/vorburger/hyCTA/3/ illustrates a (working) "UI modeling" idea I had with AngularJS; note the form is not actually coded out in the HTML template, it's driven by uimodel JSON (which in turn describes how the datamodel is to be rendered/edited):
<div ng-repeat="auimodel in uimodel">
<label>{{$index + 1}}. {{auimodel.label}}</label>
<input ng-model="datamodel[auimodel.model]" type="{{auimodel.type}}" />
</div>
Trouble is, as soon as my 'model' isn't a simple property, but a 'path', then my square bracket dynamic keys 'trick' doesn't work anymore of course.. as illustrated by the (broken) http://jsfiddle.net/vorburger/8CxRC/1/ JSFiddle. Any suggestions how one could do this?
PS: Or would something like this necessarily need a complete custom directive rather sooner than later? I’d rather not have to do this, if that’s possible at all, in order to keep creation & maintenance of such UI model "meta templates" as simple as possible...
I've just figured out one (but may be not the best?) way to achieve this myself.. see http://jsfiddle.net/vorburger/8CxRC/3/ - basically still based on my square bracket dynamic keys 'trick', but with some pre-processing:
for (var i = 0; i < $scope.uimodel.length; i++) {
var resolvedModelProperty = $scope.datamodel;
var remainingPath = $scope.uimodel[i].model;
while (remainingPath.indexOf('.') > -1) {
var nextPathSlice = remainingPath.substr(0, remainingPath.indexOf('.'));
resolvedModelProperty = resolvedModelProperty[nextPathSlice];
remainingPath = remainingPath.substr(remainingPath.indexOf('.') + 1);
}
$scope.uimodel[i].modelB = resolvedModelProperty;
$scope.uimodel[i].modelL = remainingPath;
}
这篇关于AngularJS ng-model 表单驱动的 ng-repeat over UI 模型描述数据如何?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!