AngularJS ng-model表单由ng-repeat驱动的UI模型描述数据如何？

问题描述

JSFiddle 说明我使用AngularJS的（工作）UI建模的想法;请注意，表单实际上并未在HTML模板中编码，它由uimodel JSON驱动（后者又描述了数据模型的呈现/编辑方式）：

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>

麻烦的是，一旦我的'模型'不是一个简单的属性，而是一个'路径' '，然后我的方括号动态键'技巧'当然不再起作用..如（破碎） JSFiddle。有人建议如何做到这一点吗？

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：或者像这样的东西需要一个完整的自定义指令而不是更快？我宁愿不必这样做，如果那是可能的话，为了保持创造和维护这样的UI模型元模板尽可能简单...

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驱动的UI模型描述数据如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！