javascript - 在angularjs中动态创建隐藏字段

Question

我正在开发 Angularjs 应用程序，我有一个要求，必须将隐藏变量发送到第三方应用程序。

这些隐藏变量的值应该来自数据库。

我正在使用以下代码动态创建隐藏变量。

<input type="hidden" ng-repeat="hdnvar in models.MyModel.templateVariables" name="{{hdnvar.Key}}" id="{{hdnvar.Key}}" value="{{hdnvar.Value}}" />

当用户点击提交按钮时调用以下函数

 $scope.getDetailsForTP = function () {
        $scope.models.MyModel.templateVariables = {};
        $http({
            url: "http://localhost:11149/MyService.svc/TemplateVariable",
            dataType: "json",
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            }
        }).then(function successCallback(response) {
            if (response.status == 200) {
                $scope.models.MyModel.templateVariables = response.data;
                $scope.submitForm();
            }
            else {
                alert('Error occurred in fetching template variable data');
            }
        }, function errorCallback(response) {
            //do something
        });
    };

    $scope.submitForm = function () {
        document.getElementById("apirequest").submit();
    };

隐藏变量在页面上正确呈现，但是当我检查 fiddler 时，我找不到提交的隐藏变量。

有人可以帮忙吗？

Answer 1

更新 templateVariables 后，您将立即提交表单。渲染 html 元素需要一些时间。

因此您需要在延迟一段时间后提交表单。

$scope.models.MyModel.templateVariables = response.data;
$timeout($scope.submitForm, 1000)  // submit form after 1 second