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

如果你需要动态添加带有动态绑定的html，这些动态绑定无法封装到ng-repeat，ng-if等中，一旦修改后你必须在模板上调用$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：通过将添加输入放在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/

AngularJS - 如何添加动态ng模型

1 个答案: