フィルターで ng-options を使用すると問題が発生します。
問題は、フィルターによってオプションが削除されると、select 要素のモデルが削除されたオプションの値を保持することです。
これがプランカーです。ng-options セットで動作する 2 つのフィルターがあります。オプションのリストから重複を削除するものと、null を削除するものです。これらの手順に従うことで、私が話している問題を確認できます。
- [優先メール] ドロップダウンで、最後のメール オプション「jimbob@yahoob.com」を選択します。
- 「その他の電子メール」入力ボックスのテキストを削除します。
「その他の電子メール」が null であるため、使用可能なオプションがなくなり、ドロップダウンがデフォルトで「優先電子メールを選択してください」になっていることがわかります。ただし、select 要素のモデルには、そのオブジェクトが割り当てられたままです。
同じ問題の異なるコンテキスト。
- 「優先メール」ドロップダウンで、「jimbob@yahooz.com」オプションを選択します。
- 「jimbob@yahooz.com」の「z」を削除します
そうすると、2 つの入力ボックス (「Email」と「Home Email」) の値が重複し、2 番目の入力ボックス (「Home Email」) は使用可能なオプションから除外されます。ただし、フィルタリングされたばかりのオブジェクトはモデルに割り当てられたままです。
編集：私の解決策（誰かがもっとうまくやれますか？）
ここ（plunker）は、私が思いついた最高のものです。私はAngularが初めてで、これを行うためのより良い方法があると思わずにはいられません。この解決策は「悪い」と思いますが、うまくいきます。
基本的に、スコープへの参照 (this.contact) と、使用している既定のアイテムの名前 ('default_email' または 'default_phone') をフィルターに渡します。フィルタがオプション セットから項目を削除する場合、それがデフォルトかどうかをチェックし、そうである場合はデフォルトを未定義に設定します。
また、私が何を目指しているかについてより多くのコンテキストを取得するために、もう少しコードを追加しました。