javascript - fonction - input value angular




AngularJS n'envoie pas de valeur de champ caché (8)

Affectez directement la valeur au modèle dans data-ng-value attribut data-ng-value . Puisque l'interpréteur angulaire ne reconnaît pas les champs cachés dans ngModel.

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

Pour un cas d'utilisation spécifique, je dois soumettre un seul formulaire "à l'ancienne". Moyens, j'utilise un formulaire avec action = "". La réponse est diffusée, donc je ne recharge pas 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 d'Angular:

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

Veuillez noter que la valeur correcte des données est affiché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 je clique sur submit, aucune valeur n'est envoyée au serveur. Si je change le champ de saisie pour taper "texte" cela fonctionne comme prévu. Mon hypothèse est que le champ caché n'est pas vraiment peuplé, alors que le champ de texte est réellement affiché en raison de la liaison bidirectionnelle.

Des idées comment je peux soumettre un champ caché peuplé par AngularJS?


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

J'ai dû faire face au même problème, j'ai vraiment besoin d'envoyer une clé de mon jsp au script java, ça passe environ 4h ou plus de ma journée pour le résoudre.

J'inclus cette balise sur 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 fut: Portfólio 1 criado com sucesso! ID = 3.

Meilleures salutations


J'ai trouvé une bonne 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);
        });
    };
})

puis liez 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 l'événement de changement dans javascript comme yycorman dit sur this post, donc quand changer la valeur via un plugin jQuery fonctionnera toujours.

Modifier J'ai modifié la directive pour appliquer une nouvelle valeur au modèle lorsque l'événement change est déclenché, de sorte qu'il 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());
                });
            });
        }
    };
})

Ainsi, lorsque vous déclenchez l' $("#yourInputHidden").trigger('change') avec jQuery, il met également à jour le modèle lié.


Juste au cas où quelqu'un a encore des difficultés avec cela, j'ai eu un problème similaire en essayant de garder une trace de l'utilisateur session / userid sur 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 ajouté cela comme un champ caché pour passer des paramètres entre les pages de formulaire Web

<< input type = "caché" requis ng-model = "formData.userid" ng-init = "formData.userid = uid" />

Je suis nouveau à Angular alors je ne suis pas sûr que c'est la meilleure solution possible, mais cela semble fonctionner pour moi maintenant


Le code ci-dessous travaillera pour cet IFF dans le même ordre que son mentionné assurez-vous que vous commandez est de type puis nom, ng-modèle ng-init, valeur. c'est tout.


Vous ne pouvez pas utiliser la double liaison avec un champ masqué. La solution consiste à utiliser des crochets:

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

EDIT: Voir ce sujet sur github: https://github.com/angular/angular.js/pull/2574

MODIFIER:

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

Voici la solution utilisant ng-value:

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

Voici un violon utilisant la valeur ng avec une entrée cachée: http://jsfiddle.net/6SD9N


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

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




angularjs