AngularJS 不发送隐藏字段值

Posted 2023-02-21

【中文标题】AngularJS 不发送隐藏字段值

【英文标题】：AngularJS does not send hidden field value

【发布时间】：2013-08-29 01:47:19

【问题描述】：

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

【问题讨论】：

嗯...输入文本怎么样，display: none;？太丑了。 Angular 会忽略隐藏元素。

把它作为答案@tymeJV！

我使用以下语法来绑定一个值：<input type="hidden" required ng-model="data.userid" ng-init="data.userid=pivot.id" /> 。这可能不是正确的做法，但对我有用。

【参考方案1】：

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

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

【讨论】：

谢谢！我也有同样的想法，但我只是更喜欢 Mickael 的 解决方案。

聪明/聪明的解决方案

【参考方案2】：

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

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

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

编辑：

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

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

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

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

【讨论】：

太棒了。非常感谢。我几乎要隐藏文本字段，但现在我觉得这是一个很好的解决方法。

太棒了。你也可以使用 ng-value="modelName" 来做没有括号。

没错，从Angular 1.2开始，你可以使用ng-value将表达式绑定到value属性上，答案是最新的。

当您使用 AngularJS 时，您真的需要隐藏字段吗？在 ngSubmit 上，你点击了一个控制器，你的所有数据都是完全可见的，可以通过一些 $http 服务发送。

非常感谢。 ng-model 不能用于隐藏输入的事实应该记录在 AngularJS IMO 中。

【参考方案3】：

我找到了 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 在 this 帖子中所说的那样，隐藏的输入不会触发 javascript 中的更改事件，因此当通过 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());
                );
            );
        
    ;
)

所以当你用 jQuery 触发 $("#yourInputHidden").trigger('change') 事件时，它也会更新绑定的模型。

【讨论】：

还有其他人无法让这个解决方案正常工作吗？问题是在解析和执行指令时未定义 ngModel 参数，因此没有添加 $watch。

好的。问题似乎在于第四个参数 ngModel 是一个对象，而从 sapiensworks 的链接中引用的示例通过 attr['ngModel'] 检索 ng-model 属性的字符串值，然后将其传递给手表。我可以确认进行此更改可以解决手表问题。

这里还有一个问题。当您以编程方式更改隐藏输入字段的值时，jQuery 不会触发更改事件。因此，如果我说 $(hidden_​​input_elt).val("snoopy") 我还必须添加 .change() 以触发更改事件。这样做的问题是 Angular 会抱怨上面的 $scope.apply() 因为它已经在 $apply 中了。这里的解决方案是去掉上面change函数中的$scope.$apply，直接调用ngModel.$setViewValue(...)。

【参考方案4】：

在控制器中：

$scope.entityId = $routeParams.entityId;

在视图中：

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

【讨论】：

好点...我宁愿下次只在控制器中这样做

我爱上了 ng-init

不。在循环中，如果entityId 是一个数组，它会很麻烦并为所有entityId 分配最后一个值

【参考方案5】：

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

我在我的 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. -->

结果是： 投资组合 1 criado com 成功！ ID=3。

最好的问候

【参考方案6】：

我通过 -

实现了这一点

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

【参考方案7】：

发现这个隐藏值 () 有一个奇怪的行为，我们无法让它工作。

在玩了之后我们发现最好的方法是在表单范围之后定义控制器本身的值。

.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 


])

【参考方案8】：

以防万一有人仍然为此苦苦挣扎，我在尝试跟踪多页表单上的用户会话/用户 ID 时遇到了类似的问题

我已经通过添加解决了这个问题

.when("/q2/:uid" 在路由中：

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

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

我是 Angular 的新手，所以不确定它是否是最好的解决方案，但它现在对我来说似乎没问题

【参考方案9】：

更新@tymeJV 的答案 例如：

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

【参考方案10】：

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

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

【参考方案11】：

我使用经典的 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;
    

【参考方案12】：

以下代码将按与提及的顺序相同的顺序适用于此 IFF 确保您订购的是类型，然后是名称、ng-model ng-init、值。就是这样。

【参考方案13】：

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

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

【讨论】：

你能不能多解释一下

当然！当我们使用隐藏字段或带有 display:none 属性的文本字段时，用户无法输入值。在这种情况下，ng-init 指令有助于设置字段的值。谢谢

在帖子中我的意思是对不起