AngularJS不发送隐藏字段值

179

对于特定的用例，我必须提交一个单独的表单“旧的方式”。意思是，我使用了一个action =“”的表单。响应流式传输，所以我不重新加载页面。我完全知道一个典型的AngularJS应用程序不会以这种方式提交表单，但到目前为止，我没有其他选择。AngularJS不发送隐藏字段值

这么说，我试图从角填充一些隐藏字段：

<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填充的隐藏字段？

来源

2013-08-26 Christian

嗯......如何输入文字，'display：none;'？这是丑陋的寿。 Angular忽略隐藏的元素。 – tymeJV

把这个作为答案@tymeJV！ –

我使用以下语法来绑定一个值：''。这可能不是正确的做法，但它适用于我。 –

274

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

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

编辑：在Github上查看此主题：https://github.com/angular/angular.js/pull/2574

编辑：

由于角1.2，你可以使用 'NG-值' 指令绑定的表达式到输入的值属性。该指令应该与输入收音机或复选框一起使用，但可以很好地处理隐藏的输入。

下面是使用NG-价值的解决方案：

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

这里用NG-值与隐藏输入一个小提琴：http://jsfiddle.net/6SD9N

来源

2013-08-26 14:38:42 Mickael

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

+21

太好了。而且你也可以使用ng-value =“modelName”来做到没有括号。 – Jonathan

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

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

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

来源

2013-08-26 14:24:10 tymeJV

谢谢！我以相同的方向思考，但我只是更喜欢Mickael的{{}}解决方案。 – Christian

聪明/聪明的解决方案 – ImranNaqvi

我发现在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提供的解决方案可以更好地为输入隐藏没有按” t在javascript中的更改事件，因为yycorman在this上发帖，所以当通过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，它会更新绑定的模式也是如此。

来源

2014-06-16 10:11:16

是否有其他人无法使此解决方案工作？问题在于，当指令被解析并执行时，ngModel参数是未定义的，因此$ watch没有被添加。 – icfantv

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

这里还有另一个问题。当您以编程方式更改隐藏输入字段的值时，jQuery不会触发更改事件。因此，如果我说$（hidden_input_elt）.val（“snoopy”），我还必须添加.change（）来引发更改事件。这个问题是Angular会抱怨上面的$ scope.apply（），因为它已经在$ apply中了。这里的解决方案是删除$ scope。$ apply在上面的变化函数中，只需调用ngModel。$ setViewValue（...）。 – icfantv

在控制器：

$scope.entityId = $routeParams.entityId;

在视图：

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

来源

2014-07-02 22:54:51 meffect

这是干什么的？ –

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

我爱上了ng-init – ImranNaqvi

我面临同样的问题，我真的需要从我的jsp送一键Java脚本，它花大约4小时或更多的时间来解决它。

我包括我的JavaScript/JSP本文标签：

$scope.sucessMessage = function(){ 
 
    \t var message =  ($scope.messages.sucess).format($scope.portfolio.name,$scope.portfolio.id); 
 
    \t $scope.inforMessage = message; 
 
    \t 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克里亚COM Sucesso的！ ID = 3。

问候

来源

2015-04-02 14:46:43 LeoJava

通过我实现了这个 -

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

来源

2015-11-23 13:03:56 Vivek

发现这一隐藏的价值（），我们不能让它工作一个奇怪的行为。

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

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

}])

来源

2015-12-05 19:32:24 dcpartners

万一有人还在为此挣扎，我想跟踪用户会话/用户ID的多页表格上时也有类似的问题

香港专业教育学院固定，通过增加

。当（”/Q2 /：UID”路由：

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

，并将此作为隐藏字段来传递PARAMS Web窗体页之间

< < INPUT TYPE = “隐藏” 需要NG-模型= “formData.userid” NG-INIT = “formData.userid = UID”/>

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

来源

2016-02-28 16:16:26 macieku

更新@tymeJV的回答如：

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

来源

2016-04-15 02:37:54

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

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

来源

2016-12-03 15:56: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; 
    } 
}

来源

2016-12-22 11:00:30

下面的代码将为此IFF它以相同的顺序工作，其mentionened 确保您订购的类型，然后命名， ng-model ng-init，值。而已。

来源

2017-03-23 05:34:23

AngularJS不发送隐藏字段值

回答

相关问题