AngularJS 不发送隐藏字段值

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

153140 次浏览
小开

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

<input type="text" name="someData" ng-model="data" style="display: none;"/>
小开
最佳答案

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

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

编辑: 请看 github 上的这个帖子: https://github.com/angular/angular.js/pull/2574

编辑:

从 Angular 1.2开始，您可以使用‘ ng-value’指令将表达式绑定到 input 的 value 属性。此指令应与输入单选框或复选框一起使用，但与隐藏输入一起工作得很好。

下面是使用 n- 值的解决方案:

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

下面是使用带有隐藏输入的 ng-value 的小提琴: http://jsfiddle.net/6SD9N

小开

我发现了一个很好的解决方案由迈克写在 智人工厂。它就像使用监视模型变化的指令一样简单:

.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 中的更改事件，所以当通过 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')事件时，它也会更新绑定的模型。

小开

在控制器中:

$scope.entityId = $routeParams.entityId;

观点:

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

我也面临着同样的问题, 我真的需要从 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}. -->

结果是: 第一组合成功了! ID = 3。

最好的问候

小开

我通过

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

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

玩了一会儿之后，我们发现最好的办法就是在控制器本身中定义表单作用域之后的值。

.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
}


}])
小开

为了防止有人在这方面遇到困难，我在尝试跟踪多页面表单上的用户 session/userid 时遇到了类似的问题

我通过增加

. 当(“/q2/: uid”在路由:

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

并添加这作为一个隐藏字段传递参数之间的 webform 页面

< < input type = “ hide”need ng-model = “ formData.userid”ng-init = “ formData.userid = uid”/> < 输入类型 = “隐藏”所需要的 n- 模型 = “ formData.userid”ng-init = “ formData.userid = uid”/>

进出口的新角度，所以不确定它的最佳可能的解决方案，但它似乎为我现在的工作确定

小开

更新@tymeJV 的答案 例如:

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

直接将值分配给 data-ng-value属性中的模型。 因为角度解释器不能识别隐藏字段作为 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 它在同样的顺序，因为它提到 确保您的订单是类型然后名称，n- 模型 n- init，值。

小开

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

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


提交答案