2

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

[
  { "id": 0, "value": "Basic"},
  { "id": 1, "value": "End of Month (EOM)"},
  { "id": 2, "value": "Fixed Date"},
  { "id": 3, "value": "Mixed"},
  { "id": 4, "value": "Extra"}
]

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

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

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

初期化が問題

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

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

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

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

プランカーサンプル

初期化されていません

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

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

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

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

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

$scope.x = {};
$scope.x.y = 3;

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

追加の1作品

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

$scope.lastObj = {};
$scope.lastObj.inner = [];
$scope.lastObj.inner.push(3);

より多くのネスティング

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

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

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

$scope.thing = {};
$scope.thing.list=[];
$scope.thing.list.push({"item":"3"});

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

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

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

最後の注意

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

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

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

4

2 に答える 2

3

プリミティブ型がめちゃくちゃです。それはあなたが挿入する必要があることを意味します

$scope.vm.currentDocument.fieldSets[0].fields.push({"value":3});

それ以外の

$scope.vm.currentDocument.fieldSets[0].fields.push({"value":"3"});

{"value":3}との違いに注意してください{"value":"3"}

1 つ目は Integer 型のプロパティ「value」を持つオブジェクトを定義し、2 つ目は String 型のプロパティ「value」を持つオブジェクトを定義します。Angular が型の一致をチェックすると、("3" === 3) が false と評価されるようになります。これが、angular が選択されたオプションを見つけられない理由です。これが機能するはずの方法です。

于 2014-05-01T20:32:58.417 に答える