1. ホーム
  2. javascript

[解決済み] AngularJSでhiddenフィールドの値が送信されない

2022-04-23 18:30:09

質問

特定のユースケースで、1つのフォームを旧来の方法で送信する必要があります。つまり、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>

submitを押しても、値がサーバーに送信されません。入力フィールドを "text"に変更すると、期待通りに動作します。私の推測では、hiddenフィールドは実際には入力されておらず、textフィールドは双方向バインディングによって実際に表示されています。

AngularJSで入力された隠しフィールドを送信する方法について、何かアイデアはありますか?

解決方法は?

hiddenフィールドでダブルバインディングは使えません。 解決策としては、ブラケットを使用することです。

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

EDIT : githubのこのスレッドを見てください。 https://github.com/angular/angular.js/pull/2574

EDIT

Angular 1.2以降では、'ng-value' ディレクティブを使用して、入力のvalue属性に式をバインドすることができるようになりました。このディレクティブは、radioやcheckboxの入力に使うべきですが、hidden入力でもうまく動作します。

ng-valueを使った解決策を紹介します。

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

ng-valueとhidden inputの組み合わせは以下の通りです。 http://jsfiddle.net/6SD9N