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"> 。