为了账号安全,请及时绑定邮箱和手机立即绑定

AngularJS不发送隐藏字段值

/ 猿问

AngularJS不发送隐藏字段值

慕前端131612 2019-11-12 13:15:52

对于特定的用例,我必须以“旧方式”提交单个表单。意思是,我使用带有action =“”的表单。响应已流式传输,因此我不会重新加载页面。我完全知道,典型的AngularJS应用程序不会以这种方式提交表单,但是到目前为止,我别无选择。


也就是说,我尝试从Angular填充一些隐藏字段:


<input type="hidden" name="someData" ng-model="data" /> {{data}}

请注意,显示的是正确的数据值。


该表格看起来像一个标准表格:


<form id="aaa" name="aaa" action="/reports/aaa.html" method="post">

...

<input type="submit" value="Export" />

</form>

如果我点击了提交,则没有值发送到服务器。如果我将输入字段更改为键入“文本”,它将按预期工作。我的假设是隐藏字段没有真正填充,而文本字段实际上是由于双向绑定而显示的。


有什么想法可以提交由AngularJS填充的隐藏字段吗?


查看完整描述

3 回答

?
哆啦的时光机

您不能对隐藏字段使用双重绑定。解决方案是使用方括号:


<input type="hidden" name="someData" value="{{data}}" /> {{data}}

编辑:在github上查看此线程:https : //github.com/angular/angular.js/pull/2574


编辑:


从Angular 1.2开始,您可以使用'ng-value'指令将表达式绑定到input的value属性。该指令应与输入单选框或复选框一起使用,但与隐藏的输入一起使用时效果很好。


这是使用ng-value的解决方案:


<input type="hidden" name="someData" ng-value="data" />

这是一个使用ng-value和隐藏输入的小提琴:http : //jsfiddle.net/6SD9N


查看完整回答
反对 回复 2019-11-12
?
www说

您可以始终使用type=text和,display:none;因为Angular会忽略隐藏的元素。正如OP所说,通常您不会这样做,但这似乎是一种特殊情况。


<input type="text" name="someData" ng-model="data" style="display: none;"/>


查看完整回答
反对 回复 2019-11-12
?
汪汪一只猫

我发现了Mike在sapiensworks上写的一个不错的解决方案。这就像使用监视模型更改的指令一样简单:


.directive('ngUpdateHidden',function() {

    return function(scope, el, attr) {

        var model = attr['ngModel'];

        scope.$watch(model, function(nv) {

            el.val(nv);

        });

    };

})

然后绑定您的输入:


<input type="hidden" name="item.Name" ng-model="item.Name" ng-update-hidden />

但是tymeJV提供的解决方案可能会更好,因为yycorman在这篇文章中告诉隐藏的输入不会触发javascript中的change事件,因此通过jQuery插件更改值时仍然可以使用。


编辑 我已经更改了指令,以在触发更改事件时将新值应用回模型,因此它将用作输入文本。


.directive('ngUpdateHidden', function () {

    return {

        restrict: 'AE', //attribute or element

        scope: {},

        replace: true,

        require: 'ngModel',

        link: function ($scope, elem, attr, ngModel) {

            $scope.$watch(ngModel, function (nv) {

                elem.val(nv);

            });

            elem.change(function () { //bind the change event to hidden input

                $scope.$apply(function () {

                    ngModel.$setViewValue(  elem.val());

                });

            });

        }

    };

})

因此,当您$("#yourInputHidden").trigger('change')使用jQuery 触发事件时,它也会同时更新绑定的模型。


查看完整回答
反对 回复 2019-11-12

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信