首页 文章

AngularJS不发送隐藏字段值

提问于
浏览 次
184

对于特定用例，我必须以“旧方式”提交单个表单 . 意思是，我使用带有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>

如果我点击提交，则不会向服务器发送任何值 . 如果我将输入字段更改为键入“text”，它将按预期工作 . 我的假设是隐藏字段没有真正填充，而文本字段实际上是由于双向绑定而显示的 .

有关如何提交由AngularJS填充的隐藏字段的任何想法？

javascript forms angularjs

13 回答

  • 3

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

    <input type="hidden" name="pfuserid" data-ng-value="newPortfolio.UserId = data.Id"/>
    回复于
  • 280

    我通过 - 实现了这一点

    <p style="display:none">{{user.role="store_user"}}</p>
    回复于
  • 8

    我找到了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提供的解决方案可能会更好，因为隐藏的输入不会像jycorman在this帖子中那样触发javascript中的更改事件，所以当通过jQuery插件更改值时仍然可以工作 .

    Edit 我已经更改了指令，以便在触发更改事件时将新值应用回模型，因此它将用作输入文本 .

    .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') 事件时，它也会更新绑定模型 .

    回复于
  • 44

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

    <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"/>
    回复于
  • 0

    在控制器中：

    $scope.entityId = $routeParams.entityId;

    在视图中：

    <input type="hidden" name="entityId" ng-model="entity.entityId" ng-init="entity.entityId = entityId" />
    回复于
  • 0

    更新@tymeJV的答案，例如：

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

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

    <input type="text" name="someData" ng-model="data" style="display: none;"/>
    回复于
  • 0

    我遇到了同样的问题，我真的需要将一个密钥从我的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}. -->

    结果是：Portfólio1criado com sucesso！ ID = 3 .

    最好的祝福

    回复于
  • 0

    我使用经典的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;
    }
}
    回复于
  • 0

    下面的代码将适用于这个IFF它与提到的顺序相同，确保你订购的是type，然后是name，ng-model ng-init，value . 而已 .

    回复于
  • 0

    为了防止有人仍在努力解决这个问题，我在尝试跟踪多页表单上的用户会话/用户ID时遇到了类似的问题

    我通过添加修正了

    .when（路由中的“/ q2 /：uid”：

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

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

    << input type =“hidden”required ng-model =“formData.userid”ng-init =“formData.userid = uid”/>

    我是Angular的新手，所以不确定它是最好的解决方案，但它现在似乎对我有用

    回复于
  • 1

    发现了一个关于这个隐藏值（）的奇怪行为，我们无法使它工作 .

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

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

}])
    回复于
  • 2

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

    <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值的小提琴：http://jsfiddle.net/6SD9N

    回复于

相关问题