AngularJS não envia valor de campo oculto

Para um caso de uso específico, tenho que enviar um único formulário, o “modo antigo”. Significa, eu uso um formulário com action = “”. A resposta é transmitida, por isso não estou recarregando a página. Estou completamente ciente de que um aplicativo típico do AngularJS não enviaria um formulário dessa maneira, mas até agora não tenho outra escolha.

Dito isso, tentei preencher alguns campos ocultos do Angular:

 {{data}} 

Por favor, note que o valor correto nos dados é mostrado.

O formulário parece um formulário padrão:

  ...   

Se eu clicar em enviar, nenhum valor será enviado ao servidor. Se eu alterar o campo de input para digitar “texto”, ele funcionará como esperado. Minha suposição é que o campo oculto não é realmente preenchido, enquanto o campo de texto, na verdade, é mostrado devido à binding bidirecional.

Alguma idéia de como posso enviar um campo oculto preenchido pelo AngularJS?

Você não pode usar binding dupla com campo oculto. A solução é usar colchetes:

  {{data}} 

EDIT: Veja esta discussão no github: https://github.com/angular/angular.js/pull/2574

EDITAR:

Desde o Angular 1.2, você pode usar a diretiva ‘ng-value’ para ligar uma expressão ao atributo value da input. Essa diretiva deve ser usada com input de rádio ou checkbox de seleção, mas funciona bem com input oculta.

Aqui está a solução usando ng-value:

  

Aqui está um violino usando ng-value com uma input oculta: http://jsfiddle.net/6SD9N

Você sempre pode usar um type=text e display:none; desde Angular ignora elementos ocultos. Como OP diz, normalmente você não faria isso, mas isso parece um caso especial.

  

No controlador:

 $scope.entityId = $routeParams.entityId; 

Na visão:

  

Eu encontrei uma boa solução escrita por Mike no sapiensworks . É tão simples quanto usar uma diretiva que procura mudanças no seu modelo:

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

e, em seguida, ligue sua input:

  

Mas a solução fornecida pelo tymeJV poderia ser melhor, pois a input oculta não aciona o evento de mudança em javascript, como disse yycorman neste post, portanto, quando a alteração do valor através de um plugin jQuery ainda funcionará.

Editar Eu mudei a diretiva para aplicar o novo valor de volta ao modelo quando o evento de mudança é acionado, então ele funcionará como um texto de 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()); }); }); } }; }) 

Então, quando você acionar o evento $("#yourInputHidden").trigger('change') com o jQuery, ele também atualizará o modelo vinculado.

Eu consegui isso via –

  

{{user.role="store_user"}}

Encontrei um comportamento estranho sobre esse valor oculto () e não podemos fazê-lo funcionar.

Depois de brincar, descobrimos que a melhor maneira é apenas definir o valor no próprio controlador após o escopo do formulário.

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

atualizar a resposta do @tymeJV por exemplo:

  

Eu estava enfrentando o mesmo problema, eu realmente preciso enviar uma chave do meu jsp para o script java, ele gasta em torno de 4h ou mais do meu dia para resolvê-lo.

Eu incluo esta tag no meu 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; }; 
    
{{inforMessage}}

Apenas no caso de alguém ainda se esforçar com isso, eu tive um problema semelhante ao tentar acompanhar a session do usuário / userid no formulário de várias páginas

Eu consertei isso adicionando

.quando (“/ q2 /: uid” no roteamento:

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

E acrescentou isso como um campo oculto para passar parâmetros entre páginas de webform

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

Sou novo em Angular, então não tenho certeza que é a melhor solução possível, mas parece funcionar bem para mim agora

Atribua diretamente o valor ao modelo no atributo data-ng-value . Como o interpretador Angular não reconhece campos ocultos como parte do ngModel.

  

Eu uso um javascript clássico para definir valor para input 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; } } 

Abaixo o código funcionará para este IFF na mesma ordem em que foi mencionado, certifique-se de que o pedido seja do tipo nome, ng-model ng-init, value. é isso aí.