AngularJS上的动态表单字段

Question

我有一个包含动态字段的表单，可以通过单击添加按钮来添加它们：

$scope.addField = function() {
            $scope.fields.push($sce.trustAsHtml($('#form_fields').data('prototype')))
        };

模板是这样的：

<ul>
    <li ng-repeat="field in fields">
        <div ng-bind-html="field"></div>
    </li>
</ul>

原型如下所示：

<div id="form_fields" data-prototype="<input ng-model="data['field_name'][unique_index]" type="text">" > </div>

不要介意引号，它们被转义了，添加字段后一切正常。 问题是当动态添加data['field_name'][unique_index]对于Angular来说是未知的，并且仅提交静态字段。

如何使这些新的ng-model变量对Angular可见？

Answer 1

我前段时间也遇到过类似的问题。 问题在于，当以点表示法（ foo.bar.baz ）而不是数组表示法表示时，ngModel只能创建新的数据结构。 为了解决这个问题，我创建了ng-model-create指令。 它将评估与您所拥有的表达式类似的表达式，并将ng-model属性值转换为点表示法（同时记住原始表达式）。

https://gist.github.com/jessehouchins/c073565f6b693877191a

因此，使用此方法，您的<input ng-model-create ng-model="data['field_name'][unique_index]" type="text">将类似于<input ng-model-create ng-model="data['field_name'][unique_index]" type="text"> 。