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模型变量对Angular可见？

Answer 1

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

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

所以，使用它，你的inout看起来像<input ng-model-create ng-model="data['field_name'][unique_index]" type="text">。

AngularJS上的动态表单字段

1 个答案: