問題タブ [angular-ngmodel]

オブジェクトのネストされた配列を含む複雑なオブジェクトがあります。これらの内部オブジェクトの 1 つの内部には、別のリスト内の項目の ID である値があります。このリストは、コードと説明の単なるルックアップであり、次のようになります。

ただし、ネストされたオブジェクトの値のみを保持します。[オプションの選択] リスト (ドロップ リスト) には、前のリストのすべての値が表示されるので、ユーザーは選択を行うことができます。

ng-model によるバインディング

次に、Select/Option から返された値をネストされたオブジェクトに直接バインドします。そうすれば、ユーザーが選択したときにオブジェクトが更新され、オブジェクト全体をサーバーに保存 (投稿) することができます。

初期化が問題

選択は正常に機能し、ユーザーが選択すると、ネストされたオブジェクトで値がすべて適切に更新されることがわかります。ただし、サーバーから (ネストされた) オブジェクトを取得したときに、UI (選択/オプション) を適切な値に初期化することができませんでした。

入力タイプのテキストは適切にバインド されていた 次のステップは、テキスト ボックスをフォームに追加し、同じ ng-model にバインドして、初期化されるかどうかを確認することでした。やった。

これは私が取り組んでいた大規模なプロジェクトなので、plnkr.co を作成して問題を分析しました。私の plnkr の動作はhttp://plnkr.co/edit/vyySAmr6OhCbzNnXiq4a?p=previewで見ることができます。

私のプランカーは次のようになります。

初期化されていません

サンプル 1 のプロジェクトから正確なオブジェクトを再作成しました。値 (id) が実際には 3 であるため、初期化時にドロップ リストが適切に選択されていないことがわかりますが、ドロップ リストには選択された値が表示されません。

注意: それらはバインドされており、いずれかを選択すると値が更新されます

plunker を試してみると、適切に初期化されていないサンプルでも、アイテムを選択すると他のバインドされたアイテムが即座に更新されるため、値が選択/オプション リストにバインドされていることがわかります。

うまくいきました：ハック！

私はそれを長い間使用し、偽のオブジェクトを作成して、どれが機能し、どれが機能しないかを確認しました。値オブジェクトを次のようなものに変更した場合にのみ機能します。

これで、xy ( ng-model="x.y") を select/option にバインドでき、期待どおりに select/option リストが初期化されます。plunker のサンプル 2 を参照すると、"mixed" (id 値 3) が期待どおりに選択されていることがわかります。

追加の1作品

また、次のことが機能することも学びました。

より多くのネスティング

その場合、lastObj.inner を select/option リストにバインドできます。例 3 で、それがまだ機能していることがわかります。これは、値を含む配列を含むオブジェクトです。

失敗する最小のネスティング

ただし、plunker のサンプル 4 は、AngularJS バインディングでは機能しないネストの最終量を表示します。

これは、値を持つオブジェクトを含む配列を含むオブジェクトです。選択/オプションでは正しくバインドできませんが、テキスト ボックスではバインドできません。

誰かがそれを説明できますか、それともバグですか、あるいはその両方ですか?

この場合、選択/オプションが適切にバインド/初期化できない理由を誰でも説明できますか?

最後の注意

また、私のオブジェクトのネストが異なるべきだと思う理由を説明しようとしないでください。JavaScript 自体がその動作をサポートしていないと私に言わない限り、それはここでは議論されていません。

ただし、Angular がこの深いネストを処理できないこととその理由を説明できれば、それは完全に有効な答えです。

ご意見をお寄せいただきありがとうございます。

ng-model 値の参照を動的に変更したい。私は例えばそのようにこれを行うことができます:

これは機能しますが、私の問題は、「normalStringValue1または2が配列である場合にのみ参照の変更が機能することです!通常の文字列値が次のように見える場合:

normalStringValue1 : 'Hello'そして、参照が正しく変更されないような文字列のみを保存したいのはなぜですか? どうすればこれを修正できますか？

開始時のフォームには、住所の入力フィールドが 1 つあります。以下に、クリックすると別の入力が追加されるリンクがあります。フィールド数に制限はありません。

1. Angular のモデル コレクションに新しい要素を追加するよりエレガントな方法はありますか? 現在、null 要素の配列を使用しています。リンクをクリックすると、その配列に別の null をプッシュするだけなので、ng-repeat がそれを取得します。フォームを送信するときは、その配列を調べて、null でない要素を除外します。

2. 入力フィールドがフォーカスアウト/ぼやけている場合は、検証を実行する必要があります。現在、ng-blur イベントでコントローラーから関数を呼び出していますが、現在の入力テキスト値を渡すのに問題があります。

フィドル

HTML:

JS:

ここに plnkr があります。

ディレクティブheaderInput内からモデルにアクセスするにはどうすればよいですか? でアクセスしたいディレクティブが他にsideMenuContent10個あるとしましょう。簡単にスケーラブルにする方法はありますか?ng-modelssideMenuHeadersideMenuContent

ラジオボタンの ng-value にオブジェクトを使用する方法はありますか?

次のように、ng-model がオブジェクトであるラジオ ボタンがあるとします。

そして、これはラジオボタンになります：

次のようなことを行う方法はありますか (明らかに機能しません)。

? ありがとう

ng-change ディレクティブを使用できることはわかっています。私が求めていることが可能かどうか疑問に思っています、それは非常に賢いでしょう

編集：コメントで要求されたように、セットアップに関する追加情報を少し提供しています。

ボタンの値とそのラベルの両方をモデルに保存したいと思います。コントローラーに impactOptions という配列と、ボタンを作成するための ng-repeat ディレクティブがあるとします。

この設定の問題は、ボタンの値だけを保存し、ラベルも保存したいということです。後で本当に必要です。

私はこのようなことをする方法を探しています

ng-repeat に基づいて複数のフォームが作成されるページがあります。入力に何かを書き込むまで、すべてが正常に機能し、すべてが他のすべての繰り返しフォーム入力要素に複製されます。私は ng-model="Notify.message" を使用しました。これは、入力から値を取得し、ボタンの送信時にコントロールに送信するオブジェクトにすぎず、したがって残りのロジックです。

1つのフォームが入力された場合、他のフォームはフォーム1の入力テキストに書き込まれた値を完全に保持し、複製しないようにする必要があります。

コードは次のとおりです。

に基づいて複数のフォームが作成されるページがありますng-repeat。入力に何かを書き込むまで、すべてが正常に機能し、すべてが他のすべての繰り返しフォーム入力要素に複製されます。これはng-model="Notify.message"、入力から値を取得し、ボタンの送信時にコントロールに送信するオブジェクトにすぎないため、残りのロジックを使用しました。

1つのフォームが入力された場合、他のフォームは完全に保持され、フォーム1の入力テキストに書き込まれた値を複製してはならない時期を探しています.

コードは次のとおりです。

フィドルを発行する - jsfiddle

ここでは、1 つの入力に何かが書き込まれると、他の入力も満たされます :( 。また、Notify は Java でマップされたオブジェクトであり、メッセージはその中の変数です。これをどのように分離できるか教えてください!

** 編集: 私の最初の例は、私が持っているコードを代表するものではありませんでした。

何時間もの調査とテストの後、私は最終的にこれに頼っています。

問題は、ng-repeat の子スコープ内からコントローラー スコープのモデルを更新できないことです。それがこの問題の一般的な原因であるように思われるため、プリミティブを繰り返し処理していません。さらに、repl で私の問題を再現しようとすると、私がしていることはうまくいくようです...どんな助けも大歓迎です。

現在Angular 1.2.16を使用しています

最初: plunkerでの作業例

2 番目: 壊れたコード

HTML // このスニピットは ng-app にラップされていますが、含まれていません

また、ng-repeat 内から直接親スコープを参照しようとしましたが (ただし、データを提供する必要はないと思います)、役に立ちませんでした。

私は非常に混乱しています。私のすべての調査から、これはまったく問題ないはずです。そして、リンクされているように、実際に機能します。

私が経験している奇妙さのために、別の問題を投稿しているだけです.以前の提案は、主にスコープの動作とプリミティブへのバインドに関するものであり、問​​題ではないようです.

ご協力いただきありがとうございます。