it-swarm.com.de

AngularJS sendet keinen ausgeblendeten Feldwert

Für einen bestimmten Anwendungsfall muss ich ein einzelnes Formular auf die "alte Art" einreichen. Bedeutet, ich benutze ein Formular mit action = "". Die Antwort wird gestreamt, daher lade ich die Seite nicht neu. Mir ist völlig bewusst, dass eine typische AngularJS-App ein Formular nicht auf diese Weise einreichen würde, aber bisher habe ich keine andere Wahl.

Das heißt, ich habe 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 Submit 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 wechselseitigen Bindung tatsächlich angezeigt wird.

Irgendwelche Ideen, wie ich ein mit AngularJS gefülltes verstecktes Feld einreichen kann?

190
Christian

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 Direktive 'ng-value' verwenden, um einen Ausdruck an das value-Attribut der Eingabe zu binden. Diese Direktive sollte mit Eingabe-Radio oder Kontrollkästchen verwendet werden, funktioniert aber gut mit versteckter Eingabe.

Hier ist die Lösung mit ng-Wert:

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

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

286
Mickael

Sie können immer ein type=text und display:none; since Angular ignoriert versteckte Elemente. 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;"/>
46
tymeJV

In der Steuerung:

$scope.entityId = $routeParams.entityId;

In der Ansicht:

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

Ich habe eine nette Lösung gefunden, die von Mike am sapiensworks geschrieben wurde. Es ist so einfach wie die Verwendung einer Direktive, die nach Änderungen an Ihrem Modell sucht:

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

und binde dann deine 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 am this post 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 auf das Modell anzuwenden, wenn ein Änderungsereignis ausgelöst wird, sodass es als Eingabetext fungiert.

.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 das Ereignis $("#yourInputHidden").trigger('change') mit jQuery auslösen, wird auch das gebundene Modell aktualisiert.

4
Joan JB

Fand ein seltsames Verhalten zu diesem versteckten Wert () und wir können es nicht zum Laufen bringen.

Nach dem Herumspielen haben wir herausgefunden, dass der Wert im Controller selbst nach dem Formularbereich am besten definiert ist.

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

}])
2
dcpartners

aktualisiere die Antwort von @tymeJV zB:

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

Das habe ich erreicht über -

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

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"/>
0
J. Middya

Ich verwende ein klassisches Javascript, um den Wert für versteckte Eingaben festzulegen

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

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 einem mehrseitigen Formular zu verfolgen

Ich habe das durch Hinzufügen behoben

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

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

Und fügte dies als verstecktes Feld hinzu, um Parameter zwischen Webformseiten zu übergeben

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

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

0
macieku

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

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

Der folgende Code funktioniert für diesen IFF in derselben Reihenfolge wie der erwähnte Code. Stellen Sie sicher, dass die Reihenfolge Typ, dann Name, ng-Modell, ng-Init, Wert ist. das ist es.

0
Pawan Parashar

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

Ich füge dieses Tag in meine 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

0
LeoJava