AngularJS n'envoie pas la valeur du champ caché

Question

Pour un cas d'utilisation spécifique, je dois soumettre un formulaire unique à l'"ancienne méthode". Autrement dit, j'utilise un formulaire avec action="". La réponse est diffusée en continu, ce qui m'évite de recharger la page. Je suis tout à fait conscient qu'une application AngularJS typique ne soumettrait pas un formulaire de cette façon, mais jusqu'à présent, je n'ai pas d'autre choix.

Cela dit, j'ai essayé de remplir certains champs cachés à partir d'Angular :

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

Veuillez noter que la valeur correcte des données est indiquée.

Le formulaire ressemble à un formulaire standard :

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

Si j'appuie sur "submit", aucune valeur n'est envoyée au serveur. Si je modifie le champ de saisie pour qu'il contienne du "texte", cela fonctionne comme prévu. Je suppose que le champ caché n'est pas réellement rempli, alors que le champ de texte est affiché en raison de la liaison bidirectionnelle.

Avez-vous une idée de la façon dont je peux soumettre un champ caché rempli par AngularJS ?

Answer 1

J'y suis parvenu via -

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

Answer 2

Mettre à jour la réponse de @tymeJV eg :

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

Answer 3

J'ai été confronté au même problème, J'ai vraiment besoin d'envoyer une clé de mon jsp à java script, J'ai passé environ 4h ou plus de ma journée à le résoudre.

J'inclus cette balise dans mon 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}. -->

Le résultat était : Portfólio 1 criado com sucesso ! ID=3.

Meilleures salutations

Answer 4

Au cas où quelqu'un aurait encore des difficultés avec ce problème, j'ai eu un problème similaire en essayant de garder la trace de la session/de l'identifiant de l'utilisateur dans un formulaire multipage.

J'ai corrigé cela en ajoutant

.when("/q2/:uid" dans le routage :

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

Et j'ai ajouté ceci comme champ caché pour passer des paramètres entre les pages du formulaire web

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

Je suis novice en Angular et je ne suis pas sûr que ce soit la meilleure solution possible, mais cela semble fonctionner correctement pour moi maintenant.

Answer 5

Assignez directement la valeur au modèle dans data-ng-value attribut. Comme l'interpréteur d'Angular ne reconnaît pas les champs cachés comme faisant partie du ngModel.

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