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

Vous ne pouvez pas utiliser la double liaison avec un champ caché. La solution consiste à utiliser des parenthèses :

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

EDIT : Voir ce fil de discussion sur github : https://github.com/angular/angular.js/pull/2574

EDITAR:

Depuis Angular 1.2, vous pouvez utiliser la directive 'ng-value' pour lier une expression à l'attribut valeur d'une entrée. Cette directive doit être utilisée avec les entrées radio ou checkbox mais fonctionne bien avec les entrées cachées.

Voici la solution en utilisant ng-value :

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

Voici un exemple d'utilisation de ng-value avec une entrée cachée : http://jsfiddle.net/6SD9N

Answer 2

Vous pouvez toujours utiliser un type=text y display:none; puisque Angular ignore les éléments cachés. Comme le dit OP, normalement vous ne feriez pas cela, mais cela semble être un cas spécial.

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

Answer 3

Dans le contrôleur :

$scope.entityId = $routeParams.entityId;

Dans la vue :

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

Answer 4

J'ai trouvé une belle solution écrite par Mike sur sapiensworks . C'est aussi simple que d'utiliser une directive qui surveille les changements sur votre modèle :

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

et ensuite lier votre entrée :

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

Mais la solution fournie par tymeJV pourrait être meilleure car l'entrée cachée ne déclenche pas d'événement de changement en javascript comme l'a dit yycorman sur este de sorte que la modification de la valeur au moyen d'un plugin jQuery fonctionnera toujours.

Editar J'ai modifié la directive pour appliquer la nouvelle valeur au modèle lorsque l'événement de changement est déclenché, afin qu'elle fonctionne comme un texte d'entrée.

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

donc quand vous déclenchez $("#yourInputHidden").trigger('change') avec jQuery, il mettra également à jour le modèle lié.

Answer 5

Nous avons trouvé un comportement étrange à propos de cette valeur cachée () et nous n'arrivons pas à la faire fonctionner.

Après avoir joué un peu, nous avons trouvé que la meilleure façon de procéder est de définir la valeur dans le contrôleur lui-même, après la portée du formulaire.

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

}])