AngularJS gizli alan değeri göndermiyor

Belirli bir kullanım durumu için "eski yol" tek bir form göndermek zorunda. Yani, action = "" olan bir form kullanıyorum. Yanıt akış halinde, bu yüzden sayfayı yeniden yüklemiyorum. Tipik bir AngularJS uygulamasının bu şekilde bir form göndermeyeceğinin tamamen farkındayım, ancak şimdiye kadar başka seçeneğim yok.

Yani, açısal bazı gizli alanları doldurmaya çalıştı dedi:

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

Verilerde doğru değerin gösterildiğini lütfen unutmayın.

Form standart bir forma benziyor:

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

Gönder'e basarsam, sunucuya hiçbir değer gönderilmez. Giriş alanını "metin" yazacak şekilde değiştirirsem beklendiği gibi çalışır. Benim varsayım, gizli alanın gerçekten doldurulmadığı, metin alanının aslında iki yönlü bağlanma nedeniyle gösterildiğidir.

AngularJS tarafından doldurulmuş gizli bir alanı nasıl gönderebilirim?

Gizli alanla çift ciltleme kullanamazsınız. Çözüm parantez kullanmaktır:

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

EDIT: github bu konuya bakın: https://github.com/angular/angular.js/pull/2574

DÜZENLE:

Açısal 1.2'den beri, bir ifadeyi girişin değer özelliğine bağlamak için 'ng-value' yönergesini kullanabilirsiniz. Bu yönerge giriş radyosu veya onay kutusuyla kullanılmalıdır, ancak gizli girişle iyi çalışır.

Ng-value kullanan çözüm:

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

Gizli bir girişle ng-değerini kullanan bir keman: http://jsfiddle.net/6SD9N

Her zaman bir type=textvedisplay:none; Açısal gizli öğeleri yoksayar. OP'nin dediği gibi, normalde bunu yapmazsınız, ancak bu özel bir durum gibi görünüyor.

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

Denetleyicide:

$scope.entityId = $routeParams.entityId;

Görünümde:

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

Mike'ın sapiensworks üzerine yazdığı güzel bir çözüm buldum . Modelinizdeki değişiklikleri izleyen bir yönerge kullanmak kadar basittir:

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

ve ardından girdinizi bağlayın:

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

Ancak tymeJV tarafından sağlanan çözüm, giriş gizli yycorman'ın bu yayında söylediği gibi javascript'teki değişiklik olayını ateşlemediğinden daha iyi olabilir , bu nedenle değeri bir jQuery eklentisi aracılığıyla değiştirirken yine de çalışır.

Düzenle Değişiklik olayı tetiklendiğinde yeni bir değeri modele uygulamak için yönerge değiştirdim, bu nedenle girdi metni olarak çalışacaktır.

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

$("#yourInputHidden").trigger('change')jQuery ile olayı tetiklediğinizde , bağlı modeli de güncelleyecektir.

Bu gizli değer () hakkında garip bir davranış buldum ve çalışmasını sağlayamayız.

Oyun oynadıktan sonra, form kapsamından sonra en iyi yolun sadece denetleyicideki değerin tanımlandığını gördük.

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

}])

Bunu -

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

@tymeJV'nin cevabını güncelleyin örn:

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

Aynı sorunla karşı karşıya kaldım, gerçekten jsp komutumdan java komut dosyasına bir anahtar göndermem gerekiyor, bunu çözmek için günümün yaklaşık 4 saatini veya daha fazlasını harcıyorum.

Bu etiketi JavaScript / JSP'ime ekliyorum:

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

Sonuç şuydu: Portfólio 1 criado com sucesso! J = 3.

Saygılarımla

Birisinin hala bununla mücadele etmesi durumunda, kullanıcı oturumunu / kullanıcı kimliğini çok sayfalı formda takip etmeye çalışırken benzer bir sorun yaşadım

Bunu ekleyerek düzelttim

.when ("/ q2 /: uid" yönlendirme:

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

Ve bunu webform sayfaları arasında parazitler geçirmek için gizli bir alan olarak ekledik

<< giriş türü = "gizli" gerekli ng-model = "formData.userid" ng-init = "formData.userid = uid" />

Angular'da yeniyim, bu yüzden mümkün olan en iyi çözüm olduğundan emin değilim ama şimdi benim için iyi çalışıyor gibi görünüyor

Değeri data-ng-valueöznitelikteki modele doğrudan atayın . Açısal yorumlayıcı gizli alanları ngModel'in bir parçası olarak tanımadığından.

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

Gizli girişe değer ayarlamak için klasik bir javascript kullanıyorum

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

Aşağıdaki Kod, bu IFF için belirtilenle aynı sırayla çalışacaktır, siparişin tür, ardından ad, ng-model ng-init, değer olduğundan emin olun. bu kadar.

Burada çalışma kodumu paylaşmak istiyorum:

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