AngularJS不发送隐藏字段值

2020/10/18 18:01 · javascript ·  · 0评论

对于特定的用例,我必须以“旧方式”提交单个表单。意思是,我使用带有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填充的隐藏字段吗?

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

<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

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

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

在控制器中:

$scope.entityId = $routeParams.entityId;

在视图中:

<input type="hidden" name="entityId" ng-model="entity.entityId" ng-init="entity.entityId = entityId" />

我发现了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触发事件时,它也会同时更新绑定的模型。

发现了有关此隐藏值()的奇怪行为,因此我们无法使其正常工作。

经过反复试验,我们发现最好的方法是在窗体范围之后在控制器本身中定义值。

.controller('AddController', [$scope, $http, $state, $stateParams, function($scope, $http, $state, $stateParams) {

    $scope.routineForm = {};
    $scope.routineForm.hiddenfield1 = "whatever_value_you_pass_on";

    $scope.sendData = function {

// JSON http post action to API 
}

}])

我是通过-

 <p style="display:none">{{user.role="store_user"}}</p>

更新@tymeJV的答案,例如:

 <div style="display: none">
    <input type="text" name='price' ng-model="price" ng-init="price = <%= @product.price.to_s %>" >
 </div>

我曾经遇到过同样的问题,我真的需要从我的jsp发送一个密钥到Java脚本,花了我大约4h或更长时间来解决它。

我将此标签包含在我的JavaScript / JSP中:

 $scope.sucessMessage = function (){  
    	var message =     ($scope.messages.sucess).format($scope.portfolio.name,$scope.portfolio.id);
    	$scope.inforMessage = message;
    	alert(message);  
}
 

String.prototype.format = function() {
    var formatted = this;
    for( var arg in arguments ) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};
<!-- Messages definition -->
<input type="hidden"  name="sucess"   ng-init="messages.sucess='<fmt:message  key='portfolio.create.sucessMessage' />'" >

<!-- Message showed affter insert -->
<div class="alert alert-info" ng-show="(inforMessage.length > 0)">
    {{inforMessage}}
</div>

<!-- properties
  portfolio.create.sucessMessage=Portf\u00f3lio {0} criado com sucesso! ID={1}. -->

其结果是:Portfólio1 criado com sucesso!ID = 3。

最好的祝福

万一有人仍在为此挣扎,我试图在多页表单上跟踪用户会话/用户ID时遇到类似的问题

我已经通过添加来解决

.when(“ / q2 /:uid”在路由中:

    .when("/q2/:uid", {
        templateUrl: "partials/q2.html",
        controller: 'formController',
        paramExample: uid
    })

并将其添加为隐藏字段以在Webform页面之间传递参数

<<输入类型=“ hidden”必需ng-model =“ formData.userid” ng-init =“ formData.userid = uid” />

我是Angular的新手,所以不确定它是否是最佳解决方案,但现在看来对我来说还可以

直接将值分配给data-ng-value属性中的模型由于Angular解释器无法将隐藏字段识别为ngModel的一部分。

<input type="hidden" name="pfuserid" data-ng-value="newPortfolio.UserId = data.Id"/>

我使用经典的javascript将值设置为隐藏输入

$scope.SetPersonValue = function (PersonValue)
{
    document.getElementById('TypeOfPerson').value = PersonValue;
    if (PersonValue != 'person')
    {
        document.getElementById('Discount').checked = false;
        $scope.isCollapsed = true;
    }
    else
    {
        $scope.isCollapsed = false;
    }
}

下面的代码将按照其IFF的顺序以其提及的顺序工作,请确保您输入的是类型,然后输入名称,ng-model ng-init,value。而已。

在这里,我想分享我的工作代码:

<input type="text" name="someData" ng-model="data" ng-init="data=2" style="display: none;"/>
OR
<input type="hidden" name="someData" ng-model="data" ng-init="data=2"/>
OR
<input type="hidden" name="someData" ng-init="data=2"/>
本文地址:http://javascript.askforanswer.com/angularjsbufasongyincangziduanzhi.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!