AngularJS不发送隐藏的字段值
对于一个特定的用例，我必须提交一个单一的表格“旧的方式”。 意思是，我使用一个forms与行动=“”。 响应stream，所以我不重新加载页面。 我完全知道，一个典型的AngularJS应用程序不会以这种方式提交表单，但到目前为止，我没有其他select。
这就是说，我试图从Angular中填充一些隐藏的字段：
<input type="hidden" name="someData" ng-model="data" /> {{data}} 请注意，数据中显示正确的值。
该表单看起来像一个标准的forms：
<form id="aaa" name="aaa" action="/reports/aaa.html" method="post"> ... <input type="submit" value="Export" /> </form>
如果我点击提交，没有值发送到服务器。 如果我将input字段更改为键入“文本”它按预期的方式工作。 我的假设是隐藏的字段不是真正填充的，而文本字段实际上是双向绑定显示的。
任何想法，我可以提交一个由AngularJS填充的隐藏字段？
你不能使用隐藏字段的双重绑定。 解决scheme是使用括号：
<input type="hidden" name="someData" value="{{data}}" /> {{data}}
编辑：看到这个线程在github上： https ： //github.com/angular/angular.js/pull/2574
编辑：
从Angular 1.2开始，可以使用'ng-value'指令将expression式绑定到input的值属性。 这个指令应该与input收音机或checkbox一起使用，但是对于隐藏input来说工作得很好
这是使用ng-value的解决scheme：
<input type="hidden" name="someData" ng-value="data" />
这是一个使用隐藏的inputng值的小提琴： 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" />
我find了Mike在sapiensworks上写的一个很好的解决scheme。 就像使用指令来监视模型的变化一样简单：
.directive('ngUpdateHidden',function() { return function(scope, el, attr) { var model = attr['ngModel']; scope.$watch(model, function(nv) { el.val(nv); }); }; })
然后绑定你的input：
<input type="hidden" name="item.Name" ng-model="item.Name" ng-update-hidden />
但由tymeJV提供的解决scheme可能会更好，因为input隐藏不会触发JavaScript中的更改事件，如yycorman在这篇文章中所述，所以当通过jQuery插件更改值仍然可以工作。
编辑我已经更改了指令，以便在触发更改事件时将新值应用回模型，因此它将用作input文本。
.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')事件时，它也会更新绑定模型。
发现了一个关于这个隐藏的值（）的奇怪行为，我们不能让它工作。
玩过之后，我们发现最好的方法就是在表单范围之后定义控制器本身的值。
.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脚本，我花了大约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}. -->
以防万一有人仍然与此斗争，我试图跟踪用户会话/ userid多页forms时有类似的问题
我通过添加修复
.when（“/ q2 /：uid”中的路由：
.when("/q2/:uid", { templateUrl: "partials/q2.html", controller: 'formController', paramExample: uid })
并添加这个作为隐藏字段之间传递参数的网页forms
<< input type =“hidden”required ng-model =“formData.userid”ng-init =“formData.userid = uid”/>
Im对Angular来说是个新东西，所以不确定它是否是最好的解决scheme，但现在看起来对我来说还是可以的
在data-ng-value属性中直接赋值给model。 由于Angular解释器不能将隐藏的字段识别为ngModel的一部分。
<input type="hidden" name="pfuserid" data-ng-value="newPortfolio.UserId = data.Id"/>
我使用一个经典的JavaScript来设置隐藏的input值
$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工作，它与它提到的顺序相同，确保你的顺序是types，然后是名称，ng-model ng-init，值。 而已。
