[解決済み] AngularJSでhiddenフィールドの値が送信されない
質問
特定のユースケースで、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
関連
-
Vue+ElementUIによる大規模なフォームの処理例
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] JavaScriptでテキスト入力フィールドの値を取得するにはどうすればよいですか?
-
[解決済み] Reduxの非同期フローになぜミドルウェアが必要なのか?
-
[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?
-
[解決済み] AngularJs $http.post() でデータが送信されない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
要素ツリー制御によるvueTreeテーブル
-
Vueにシンプルなメモ帳機能を実装
-
[解決済み】SyntaxError: JSONの位置1に予期しないトークンoがある。
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
[解決済み】jQuery - hidden input fieldの値の変更を検出する。