AngularJS n'envoie pas de valeur de champ cachée

vous pouvez toujours utiliser un type=text et display:none; car angulaire ignore les éléments cachés. Comme dit L'OP, normalement tu ne ferais pas ça, mais ça semble être un cas spécial.

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

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

et puis 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 que l'entrée cachée ne tire pas le changement d'événement dans javascript comme yycorman dit sur ce "post 151960920", donc en changeant la valeur par un jQuery plugin fonctionne toujours.

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

j'ai réalisé cette via -

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

Trouvé un comportement étrange à propos de cette valeur cachée () et nous ne pouvons pas travailler.

après avoir joué autour de nous, nous avons trouvé la meilleure façon est juste défini la valeur dans le contrôleur lui-même après la portée de forme.

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

}])

mise à jour @tymeJV 's réponse par exemple:

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

j'ai eu à faire face au même problème, J'ai vraiment besoin d'envoyer une clé de mon JSP à Java script, Il 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 a été: Portfólio 1 criado com sucesso! ID=3.

Meilleures Salutations

juste au cas où quelqu'un lutte encore avec cela, j'ai eu le même problème en essayant de garder la trace de session utilisateur / userid sur le formulaire de multipage

Ive fixe qu'en ajoutant

.lorsque("/t2/:uid" dans le routage:

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

et a ajouté ceci comme un champ caché pour passer des params entre les pages webform

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

Je suis nouveau à angulaire donc pas sûr de sa la meilleure solution possible, mais il semble fonctionner bien pour moi maintenant

attribue directement la valeur au modèle dans l'attribut data-ng-value . Depuis Angular interpreter ne reconnaît pas les champs cachés comme faisant partie de ngModel.

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

j'utilise un javascript classique pour définir la valeur de l'entrée cachée

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

ci-dessous code fonctionnera pour cette IFF il dans le même ordre que son mentionné assurez-vous de commande tapez le nom, ng-modèle gn-initialisation de la valeur. thats It.

ici je voudrais partager mon code de travail:

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