javascript - AngularJS - 如何添加动态 ng-model

Question

我正在使用表单，并希望在动态输入元素上添加 ng-model。我有一个范围变量定义为:

$scope.formData = {};

页面上有几个下拉列表，用户可以从中选择一个选项，并根据这些选项，我们将一些输入字段附加到表单正文中。

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

这对我不起作用，因为我假设 Controller 运行后它无法注册任何新的ng-model。有没有办法添加动态 ng-model 或者有一种不同的方法来实现我想要做的事情(即构建可以在页面上加载的预定义 View )？

编辑: 我创建了一个 jsfiddle 来概述我正在尝试做的事情 - http://jsfiddle.net/k5u64yk1/

Answer 1

如果您需要动态添加无法封装为 ng-repeat、ng-if 等动态绑定(bind)的 html，则必须在模板修改为后调用 $compile警告 AngularJS 它必须重新解析模板并启动新的摘要周期。这将获取任何新的 ng-model 绑定(bind)并将它们适本地绑定(bind)到您的范围。

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: 通过将添加输入放置在单击事件内，可以避免无限编译循环。请注意，这当前会重置表单的状态，因此如果您想解决这个问题，则需要捕获表单状态并在编译后恢复它。

$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/