web-dev-qa-db-ja.com

Angularモデル値を設定する際にselect要素に奇妙なオプションを追加します

そのように定義されたselect要素があります：

_<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id">
    <option value="">Select Country</option>
    <option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>
_

このselect要素を含むディレクティブに値を設定していなくても、すべて正常に動作します。しかし、値98のオプションを選択する代わりに_newAddressForm.country_id = 98_のようなことをすると、Angularはselect要素の上部に新しいものを挿入します。

_<option value="? string:98 ?"></option>
_

何が得られますか？これはどのような形式で、なぜこれが起こるのですか？ディレクティブでconsole.log(newAddressForm.country_id)を実行すると、通常の_"98"_を取得することに注意してください。生成されたHTMLでは奇妙なことになります。

編集：状況の更新。_ng-select_の使用に切り替えましたが、問題は解決しません。

奇妙な要素は表示されなくなりましたが、上部に別の要素があり、値として疑問符_?_のみがあり、ラベルはありません。

それは、私が集めたものから、Angularの_"none selected"_オプションです。ただし、選択するように指示したオプションが選択されない理由はまだわかりません。

_newAddressForm.country_id = 98_を実行しても結果は得られません。何故ですか？

angularjsangularjs-directiveangularjs-select
44
Swader

Angularは、select要素の値を配列の実際の値に設定せず、スコープバインディングを管理するためにいくつかの内部処理を行います。このリンクでマークラージコクの最初のコメントを参照してください。

https://docs.angularjs.org/api/ng/directive/select#overview

ユーザーがオプションのいずれかを選択すると、Angularはインデックス（またはキー）を使用して配列（またはオブジェクト）の値をルックアップします。そのルックアップされた値はモデルの設定値です（したがって、モデルはHTMLに表示される値に設定されません！これにより、多くの混乱が生じます。）

ng-repeatが最適なオプションです。

16
lucuma

ng-optionsで次の構文を使用すると、この問題を解決できました。

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id" ng-options="country.id as country.name for country in countries">
  <option value="">Select Country</option>
</select>
20
jessedvrs

値が整数である場合、文字列でなくても ""を使用する必要があります。その単純な理由は、値として疑問符が付いたオプションを取得する正確な理由です。

あなたはこれを使うべきではありません：

{ value: 0, name: "Pendiente" },
{ value: 1, name: "Em andamento" },
{ value: 2, name: "Erro" },
{ value: 3, name: "Enviar email" },
{ value: 4, name: "Enviado" }

これは正しい方法です：

{ value: "0", name: "Pendiente" },
{ value: "1", name: "Em andamento" },
{ value: "2", name: "Erro" },
{ value: "3", name: "Enviar email" },
{ value: "4", name: "Enviado" }

「」を使用していないレコードが少なくとも1つある場合、これを取得できますか？オプション値。

2
Martin

選択要素に値を割り当てると、AngularJSはその選択要素のオプションタグのvalue属性で指定された値を探します。ただし、問題はAngularJSが型ベースの比較を行うです。そのため、オプションタグの値が文字列（通常）であり、ng-modelを使用してバインドする変数が数値である場合、AngularJSは一致するオプション要素を見つけることができず、したがって、このような独自の要素を作成します-

<option value="? integer:10 ?"></option>

解決策は、それ自体をバインドしながら、適切なタイプに変換することです。

この場合、解決策は整数をバインドすることです

<select name="country_id" id="country_id" required="required" ng-model="parseInt(newAddressForm.country_id)">
<option value="">Select Country</option>
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

値が文字列として設定されている場合、トリックは使用することです

<select ... ng-model="newAddressForm.country_id.toString()" >
1
Pratik Kapasi

私は今晩早くこの同じ問題に直面していました。明示的に作成していなくても、選択オプションがリストの最初に表示されていました。私はコントローラーで選択オプションのリストを記入し、jessedvrsで前述したのと同じng-options構文を使用していました（ただし、彼のようにHTMLでマークするのではなく、コントローラーで「オプションを選択」デフォルトオプションを挿入していましただった）。

何らかの理由で、選択リストにはインデックスゼロで値「？」の追加オプションが常に表示されますが、コントローラーのデフォルトオプションの入力方法を変更すると、この問題はなくなりました。 API呼び出しを行うことで選択オプションを設定し、それらをプロミス内に埋めました。私はその約束で最初にしたこととしてデフォルトの「オプションを選択する」オプションも設定するというミスを犯しましたが、代わりにこれを行ったとき、約束の外側（API呼び出しを行う前に） 、選択オプションは私がそれらを望んでいた方法で埋めました。

Jessedvrsオプションは問題の解決策の1つだと思います（HTMLマークアップでデフォルトオプションを設定する）が、代わりにjavascriptでオプションを設定する場合は、APIを呼び出す前にデフォルトオプションを設定することをお勧めしますHTMLのレンダリング中にまだ実行中のプロセス。

1
Developer Dave

スコープ変数にデータをプッシュする間、次のコードを使用できます

$scope.enquiryLocationRow.Push({'location': EnqLocation.location, 'state_id': Number(EnqLocation.state_id), 'country_id': Number(EnqLocation.country_id)});

それは私の問題を解決しました

0
Manoj Atakare

ng-optionsの最後に「value by track」を使用します：D

以下の例のように：

ng-options = "country.idは、country.idによって国を追跡する国のcountry.nameとして"

0
Renan.