web-dev-qa-db-ja.com

AngularJSは隠しフィールド値を送信しません

特定のユースケースでは、私は単一のフォームを「古い方法」で送信する必要があります。つまり、action = ""のフォームを使用します。応答がストリーミングされるので、ページをリロードしていません。私は典型的なAngularJSアプリがそのようにフォームを送信しないことを完全に認識していますが、これまでのところ私は他に選択肢がありません。

そうは言っても、Angularからいくつかの隠しフィールドを埋めようとしました。

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

データの正しい値が表示されていることに注意してください。

フォームは標準フォームのように見えます。

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

送信を押すと、サーバーに値が送信されません。入力フィールドを "text"と入力するように変更しても、期待通りに動作します。私の考えでは、隠しフィールドは実際には入力されていませんが、テキストフィールドは実際には双方向バインディングで表示されています。

AngularJSが埋め込んだ隠しフィールドを送信する方法を教えてください。

javascriptformsangularjs
190
Christian

隠しフィールドで二重結合を使用することはできません。解決策は括弧を使うことです：

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

編集：githubでこのスレッドを参照してください： https://github.com/angular/angular.js/pull/2574

編集：

Angular 1.2以降、式を入力のvalue属性にバインドするために 'ng-value'ディレクティブを使用できます。このディレクティブは入力ラジオまたはチェックボックスと一緒に使われるべきですが、隠された入力でうまく働きます。

これはng-valueを使った解決策です：

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

これは、隠れた入力でng-valueを使ったフィドルです。 http://jsfiddle.net/6SD9N

284
Mickael

Angularは非表示の要素を無視するため、いつでもtype=textおよびdisplay:none;を使用できます。 OPが言うように、通常はそうしないでしょうが、これは特別な場合のようです。

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

コントローラで：

$scope.entityId = $routeParams.entityId;

ビュー内：

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

私はMikeが sapiensworks に書いたNice解を見つけました。モデルの変更を監視するディレクティブを使用するのと同じくらい簡単です。

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

そして入力をバインドします。

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

しかし、yycormanが this postで述べたように、入力が隠されてもjavascriptでchangeイベントが発生しないため、tymeJVによって提供される解決策はより良い可能性があります。 。

編集changeイベントがトリガーされたときに新しい値をモデルに適用するようにディレクティブを変更したので、入力テキストとして機能します。

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

そのため、jQueryを使って$("#yourInputHidden").trigger('change')イベントをトリガーすると、バインドモデルも更新されます。

4
Joan JB

この隠された値（）についての奇妙な振る舞いを見つけました。それを機能させることはできません。

試してみた結果、最良の方法はフォームスコープの後にコントローラ自体の値を定義することです。

.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

@tymeJVの答えを更新してください。

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

私はこれを達成しました - 

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

ここで私は作業コードを共有したいと思います。

<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

私は古典的なJavaScriptを使って値を隠し入力に設定しています

$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

万が一誰かがまだこれに苦労しているのですが、私はマルチページフォーム上のユーザーセッション/ユーザーIDを追跡しようとするときに同様の問題を抱えていました

追加することでそれを修正しました

ルーティングの.when（ "/ q2 /：uid"：

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

Webフォームページ間でパラメータを渡すための隠しフィールドとしてこれを追加しました

<< input type = "hidden"が必要ですng-model = "formData.userid" ng-init = "formData.userid = uid" />

Angularの初心者なので、最良の解決策とは言えませんが、今は問題ないようです。

0
macieku

data-ng-value属性でモデルに値を直接割り当てます。 Angularインタプリタは、隠しフィールドをngModelの一部として認識しません。

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

以下のコードは、このIFFに対して、言及した順序と同じ順序で機能します。順序が型、名前、ng-model ng-init、値の順であることを確認してください。それでおしまい。

0
Pawan Parashar

私は同じ問題に直面していました、私は本当に私のJSPからJavaスクリプトにキーを送る必要があります。

このタグを私の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}. -->

結果は次のとおりです。Portfólio1 criado com sucesso！ ＩＤ ＝ ３。

宜しくお願いします

0
LeoJava