AngularJS nie wysyła wartości ukrytego pola

W przypadku konkretnego zastosowania muszę przesłać pojedynczy formularz „starą drogą”. Znaczy, używam formularza z działaniem = "". Odpowiedź jest przesyłana strumieniowo, więc nie ładuję strony ponownie. Jestem w pełni świadomy, że typowa aplikacja AngularJS nie przesyła formularza w ten sposób, ale jak dotąd nie mam innego wyboru.

To powiedziawszy, próbowałem wypełnić niektóre ukryte pola z Angulara:

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

Uwaga: wyświetlana jest poprawna wartość w danych.

Formularz wygląda jak standardowy formularz:

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

Po naciśnięciu przycisku Prześlij żadna wartość nie zostanie wysłana na serwer. Jeśli zmienię pole wprowadzania na „tekst”, będzie działać zgodnie z oczekiwaniami. Moje założenie jest takie, że ukryte pole nie jest tak naprawdę wypełnione, podczas gdy pole tekstowe jest faktycznie wyświetlane ze względu na dwukierunkowe wiązanie.

Jakieś pomysły, jak mogę przesłać ukryte pole wypełnione przez AngularJS?

Nie można używać podwójnego wiązania z ukrytym polem. Rozwiązaniem jest użycie nawiasów:

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

EDYCJA: Zobacz ten wątek na github: https://github.com/angular/angular.js/pull/2574

EDYTOWAĆ:

Od wersji Angular 1.2 możesz użyć dyrektywy „ng-value”, aby powiązać wyrażenie z atrybutem wartości wejścia. Niniejsza dyrektywa powinna być używana z wejściowym radiem lub polem wyboru, ale działa dobrze z ukrytym wejściem.

Oto rozwiązanie wykorzystujące wartość ng:

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

Oto skrzypce używające wartości ng z ukrytym wejściem: http://jsfiddle.net/6SD9N

Zawsze możesz użyć type=text a, display:none;ponieważ Angular ignoruje ukryte elementy. Jak mówi OP, normalnie byś tego nie zrobił, ale wydaje się to szczególnym przypadkiem.

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

W kontrolerze:

$scope.entityId = $routeParams.entityId;

W widoku:

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

Znalazłem fajne rozwiązanie napisane przez Mike'a w sapiensworks . Jest to tak proste, jak użycie dyrektywy, która obserwuje zmiany w twoim modelu:

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

a następnie powiąż swoje dane wejściowe:

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

Ale rozwiązanie dostarczone przez tymeJV mogłoby być lepsze, ponieważ wejście ukryte nie uruchamia zdarzenia zmiany w javascript, jak powiedział yycorman w tym poście, więc przy zmianie wartości za pomocą wtyczki jQuery nadal będzie działać.

Edytuj Zmieniłem dyrektywę, aby zastosować nową wartość z powrotem do modelu, gdy zostanie wywołane zdarzenie zmiany, więc będzie działać jako tekst wejściowy.

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

więc kiedy wywołasz $("#yourInputHidden").trigger('change')zdarzenie za pomocą jQuery, zaktualizuje on również powiązany model.

Znaleźliśmy dziwne zachowanie dotyczące tej ukrytej wartości () i nie możemy jej uruchomić.

Po zabawie okazało się, że najlepszym sposobem jest zdefiniowanie wartości w samym kontrolerze po zakresie formularza.

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

}])

Osiągnąłem to przez -

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

zaktualizuj odpowiedź @tymeJV, np .:

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

Miałem do czynienia z tym samym problemem, naprawdę muszę wysłać klucz z mojego pliku JSP do skryptu Java, aby rozwiązać problem, spędzam około 4 godzin lub dłużej.

Dołączam ten tag do mojego 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}. -->

Rezultat: Portfolio 1 criado com sucesso! ID = 3.

Z poważaniem

Na wypadek, gdyby ktoś nadal miał z tym problem, miałem podobny problem podczas próby śledzenia sesji użytkownika / identyfikatora użytkownika na formularzu wielostronicowym

Naprawiłem to, dodając

.when („/ q2 /: uid” w routingu:

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

I dodał to jako ukryte pole do przekazywania parametrów między stronami formularza internetowego

<< input type = "ukryty" wymagany ng-model = "formData.userid" ng-init = "formData.userid = uid" />

Jestem nowy w Angular, więc nie jestem pewien, czy jest to najlepsze możliwe rozwiązanie, ale wydaje mi się, że teraz działa dobrze

Bezpośrednio przypisz wartość do modelu w data-ng-valueatrybucie. Ponieważ interpreter kątowy nie rozpoznaje ukrytych pól jako części ngModel.

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

Używam klasycznego javascript do ustawiania wartości ukrytych danych wejściowych

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

Poniższy kod będzie działał dla tego IFF w tej samej kolejności, w jakiej wspomniano, upewnij się, że zamawiasz to type, a następnie name, ng-model ng-init, value. Otóż ​​to.

Tutaj chciałbym udostępnić mój działający kod:

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