AngularJS-如何添加動態ng模型

Question

我正在處理表單，並想在動態輸入元素上添加ng-model 。 我有一個范圍變量定義為：

$scope.formData = {};

在頁面上，有幾個下拉列表，用戶可以從中選擇一個選項，根據這些選項，我們將一些輸入字段附加到表單主體中。

formBody.append('<input ng-model="formData.'+obj.Title+'" type="number"></input></br>');

這對我不起作用，因為我假設控制器運行后就無法注冊任何新的ng-model 。 有沒有添加動態ng-model方法，或者有什么其他方法可以嘗試執行（即構建可以在頁面上加載的預定義視圖）？

編輯：我創建了一個jsfiddle，概述了我想做的事情-http: //jsfiddle.net/k5u64yk1/

Answer 1

如果您需要動態添加帶有無法綁定到ng-repeat，ng-if等中的動態綁定的html，則必須在修改模板后在模板上調用$compile以警告AngularJS它必須重新解析模板，啟動一個新的摘要周期。 這將獲取所有新的ng-model綁定，並將它們適當地綁定到您的范圍。

HTML：

<div ng-app="MyApp" ng-controller="MyCntrl">
    <button ng-click="addInput()">Add Input</button>
    <div id="form">
        input would go here.
    </div>
</div>

JS：通過將add輸入放置在click事件中，可以避免無限的編譯循環。 請注意，這當前會重置表單狀態，因此，如果要解決此問題，則需要捕獲表單狀態並在編譯后將其還原。

$scope.addInput = function () {
    var aForm = (angular.element(document.getElementById('form')));

    if ($scope.data["Digital Conversation"][0].MetricType.Title === "Number") {
        aForm.append(
            '<input ng-model="formData.' + 
            $scope.data["Digital Conversation"][0].Title.Title + 
            '" type="number"></input>');
    }

    $compile(aForm)($scope);
}

您可以在這里找到有效的jsfiddle： http ： //jsfiddle.net/k5u64yk1/