AngularJS sendet keinen versteckten Feldwert

Für einen bestimmten Anwendungsfall muss ich ein einzelnes Formular auf "alte Weise" einreichen. Das heißt, ich benutze ein Formular mit action = "". Die Antwort wird gestreamt, daher lade ich die Seite nicht neu. Ich bin mir völlig bewusst, dass eine typische AngularJS-App kein Formular auf diese Weise senden würde, aber bisher habe ich keine andere Wahl.

Trotzdem habe ich versucht, einige versteckte Felder aus Angular zu füllen:

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

Bitte beachten Sie, dass der korrekte Wert in den Daten angezeigt wird.

Das Formular sieht aus wie ein Standardformular:

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

Wenn ich auf Senden drücke, wird kein Wert an den Server gesendet. Wenn ich das Eingabefeld in "Text" ändere, funktioniert es wie erwartet. Ich gehe davon aus, dass das ausgeblendete Feld nicht wirklich ausgefüllt ist, während das Textfeld aufgrund der bidirektionalen Bindung tatsächlich angezeigt wird.

Irgendwelche Ideen, wie ich ein verstecktes Feld einreichen kann, das von AngularJS ausgefüllt wird?

Sie können keine Doppelbindung mit ausgeblendetem Feld verwenden. Die Lösung besteht darin, Klammern zu verwenden:

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

BEARBEITEN: Siehe diesen Thread auf Github: https://github.com/angular/angular.js/pull/2574

BEARBEITEN:

Seit Angular 1.2 können Sie die Anweisung 'ng-value' verwenden, um einen Ausdruck an das value-Attribut der Eingabe zu binden. Diese Anweisung sollte mit Eingabe-Radio oder Kontrollkästchen verwendet werden, funktioniert jedoch gut mit versteckten Eingaben.

Hier ist die Lösung mit ng-value:

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

Hier ist eine Geige mit ng-Wert und versteckter Eingabe: http://jsfiddle.net/6SD9N

Sie können immer ein type=textund verwenden, display:none;da Angular versteckte Elemente ignoriert. Wie OP sagt, würden Sie dies normalerweise nicht tun, aber dies scheint ein Sonderfall zu sein.

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

In der Steuerung:

$scope.entityId = $routeParams.entityId;

In der Ansicht:

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

Ich habe eine nette Lösung gefunden, die Mike für sapiensworks geschrieben hat . Es ist so einfach wie die Verwendung einer Direktive, die auf Änderungen an Ihrem Modell achtet:

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

und binden Sie dann Ihre Eingabe:

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

Die von tymeJV bereitgestellte Lösung könnte jedoch besser sein, da versteckte Eingaben kein Änderungsereignis in Javascript auslösen, wie yycorman in diesem Beitrag sagte. Wenn Sie also den Wert über ein jQuery-Plugin ändern, funktioniert dies weiterhin.

Bearbeiten Ich habe die Direktive geändert, um einen neuen Wert wieder auf das Modell anzuwenden, wenn ein Änderungsereignis ausgelöst wird, sodass es als Eingabetext funktioniert.

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

Wenn Sie also ein $("#yourInputHidden").trigger('change')Ereignis mit jQuery auslösen , wird auch das gebundene Modell aktualisiert.

Wir haben ein seltsames Verhalten bei diesem versteckten Wert () festgestellt und können ihn nicht zum Laufen bringen.

Nach dem Herumspielen haben wir festgestellt, dass der beste Weg darin besteht, den Wert im Controller selbst nach dem Formularbereich zu definieren.

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

}])

Ich habe dies erreicht über -

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

Aktualisieren Sie die Antwort von @tymeJV, z.

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

Ich hatte das gleiche Problem, ich muss wirklich einen Schlüssel von meinem JSP an das Java-Skript senden. Es dauert ungefähr 4 Stunden oder mehr meines Tages, um es zu lösen.

Ich füge dieses Tag in mein JavaScript / JSP ein:

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

Das Ergebnis war: Portfólio 1 criado com sucesso! ID = 3.

Freundliche Grüße

Nur für den Fall, dass noch jemand damit zu kämpfen hat, hatte ich ein ähnliches Problem, als ich versuchte, die Benutzersitzung / Benutzer-ID auf mehrseitigem Formular zu verfolgen

Ich habe das durch Hinzufügen behoben

.when ("/ q2 /: uid" im Routing:

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

Und fügte dies als verstecktes Feld hinzu, um Parameter zwischen Webform-Seiten zu übergeben

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

Ich bin neu bei Angular, bin mir also nicht sicher, ob es die bestmögliche Lösung ist, aber es scheint jetzt für mich in Ordnung zu sein

Weisen Sie den Wert direkt dem Modell im data-ng-valueAttribut zu. Da Angular Interpreter versteckte Felder als Teil von ngModel nicht erkennt.

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

Ich benutze ein klassisches Javascript, um den Wert auf versteckte Eingaben zu setzen

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

Der folgende Code funktioniert für diese IFF in derselben Reihenfolge wie die angegebenen. Stellen Sie sicher, dass Ihre Bestellung vom Typ, dann Name, ng-Modell ng-init, Wert ist. das ist es.

Hier möchte ich meinen Arbeitscode teilen:

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