AngularJS no envía valor de campo oculto

Para un caso de uso específico, tengo que enviar un formulario único a la "antigua". Significa que uso un formulario con action = "". La respuesta se transmite, por lo que no estoy volviendo a cargar la página. Soy completamente consciente de que una aplicación típica de AngularJS no enviaría un formulario de esa manera, pero hasta ahora no tengo otra opción.

Dicho esto, traté de llenar algunos campos ocultos de Angular:

<input type="hidden" name="someData" ng-model="data" /> {{data}}

Tenga en cuenta que se muestra el valor correcto en los datos.

El formulario se parece a un formulario estándar:

<form id="aaa" name="aaa" action="/reports/aaa.html" method="post">
...
<input type="submit" value="Export" />
</form>

Si presiono enviar, no se envía ningún valor al servidor. Si cambio el campo de entrada para escribir "texto", funciona como se esperaba. Mi suposición es que el campo oculto no está realmente poblado, mientras que el campo de texto en realidad se muestra debido al enlace bidireccional.

¿Alguna idea de cómo puedo enviar un campo oculto poblado por AngularJS?

No puede usar doble enlace con campo oculto. La solución es usar corchetes:

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

EDITAR: Vea este hilo en github: https://github.com/angular/angular.js/pull/2574

EDITAR:

Desde Angular 1.2, puede usar la directiva 'ng-value' para vincular una expresión al atributo de valor de entrada. Esta directiva debe usarse con radio de entrada o casilla de verificación pero funciona bien con entrada oculta.

Aquí está la solución usando ng-value:

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

Aquí hay un violín que usa ng-value con una entrada oculta: http://jsfiddle.net/6SD9N

Se puede utilizar siempre una type=texty display:none;ya no hace caso angular elementos ocultos. Como dice OP, normalmente no harías esto, pero esto parece un caso especial.

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

En el controlador:

$scope.entityId = $routeParams.entityId;

En la vista:

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

He encontrado una buena solución escrita por Mike en sapiensworks . Es tan simple como usar una directiva que vigila los cambios en su modelo:

.directive('ngUpdateHidden',function() {
    return function(scope, el, attr) {
        var model = attr['ngModel'];
        scope.$watch(model, function(nv) {
            el.val(nv);
        });
    };
})

y luego vincula tu entrada:

<input type="hidden" name="item.Name" ng-model="item.Name" ng-update-hidden />

Pero la solución proporcionada por tymeJV podría ser mejor ya que la entrada oculta no activa el evento de cambio en javascript como yycorman dijo en esta publicación, por lo que al cambiar el valor a través de un complemento jQuery aún funcionará.

Editar He cambiado la directiva para aplicar un nuevo valor al modelo cuando se activa el evento de cambio, por lo que funcionará como un texto de entrada.

.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());
                });
            });
        }
    };
})

así que cuando desencadena un $("#yourInputHidden").trigger('change')evento con jQuery, también actualizará el modelo enlazado.

Encontró un comportamiento extraño sobre este valor oculto () y no podemos hacerlo funcionar.

Después de jugar, descubrimos que la mejor manera es definir el valor en el controlador después del alcance del formulario.

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

}])

Lo logré a través de -

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

Actualice la respuesta de @tymeJV, por ejemplo:

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

Tenía el mismo problema, realmente necesito enviar una clave desde mi script jsp a java. Pasé alrededor de 4 horas o más de mi día para resolverlo.

Incluyo esta etiqueta en mi 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}. -->

El resultado fue: Portfólio 1 criado com sucesso! ID = 3.

Atentamente

En caso de que alguien todavía tenga problemas con esto, tuve un problema similar al intentar realizar un seguimiento de la sesión de usuario / ID de usuario en un formulario de varias páginas

Lo arreglé agregando

.when ("/ q2 /: uid" en la ruta:

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

Y agregó esto como un campo oculto para pasar parámetros entre páginas de formularios web

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

Soy nuevo en Angular, así que no estoy seguro de que sea la mejor solución posible, pero parece que funciona bien para mí ahora

Asigne directamente el valor al modelo en el data-ng-valueatributo. Dado que el intérprete angular no reconoce los campos ocultos como parte de ngModel.

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

Yo uso un javascript clásico para establecer el valor de entrada oculta

$scope.SetPersonValue = function (PersonValue)
{
    document.getElementById('TypeOfPerson').value = PersonValue;
    if (PersonValue != 'person')
    {
        document.getElementById('Discount').checked = false;
        $scope.isCollapsed = true;
    }
    else
    {
        $scope.isCollapsed = false;
    }
}

El siguiente código funcionará para este IFF en el mismo orden en que se menciona, asegúrese de que su pedido sea tipo y luego nombre, ng-model ng-init, valor. Eso es.

Aquí me gustaría compartir mi código de trabajo:

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