web-dev-qa-db-ja.com

選択でng-modelの初期値が設定されていません

私は列挙型を持っています（私はTypeScriptを使用してコード化します）：

export enum AddressType
{
    NotSet = 0,

    Home = 1,
    Work = 2,
    Headquarters = 3,

    Custom = -1,
}

次に、コントローラーにtypeという名前のフィールドがあり、選択入力で選択する必要がある初期値を設定します（AddressType.Headquartersに設定します）。

最後に、私のHTMLに以下を追加しました。

<select ng-model="Ctrl.type" ng-options="addressType for addressType in Ctrl.getAddressTypes()"></select>

1つを除いて、すべてが正常に機能しているようです。何らかの理由で、すべてのバインディングが更新された後、Angularはselectで最初に「3」（Headquarters）を選択しません。 Angularは、代わりに次のような追加オプションを作成します。

<option value="?" selected="selected"></option>

そのため、何らかの理由でAngularはコンボで選択する初期オプションを把握できません。

ユーザーがコンボボックスの別のオプションを選択すると、Ctrl.typeが適切に更新され、その部分でバインディングが正常に機能します。基本的に私の問題は、最初に選択する必要があるオプションが期待どおりに選択されていないことです。

その問題を引き起こしているここで何が欠けていますか？

angularjsselectionoption
21
sboisse

問題が見つかりました：

Ctrl.getAddressTypes（）によって返される配列は、文字列の配列でした：

["0", "1", "2", "3", "1"]

また、Ctrl.typeに格納されているものはタイプ番号でした。

AngularJSは、「===」演算子を使用して、ng-optionsに提供された配列をng-modelに提供された値と比較します。その場合、3は「3」に等しくありません-それが動作しなかった理由です。

32
sboisse

番号IDを使用すると、よくこの問題に遭遇します。この癖を回避する方法は、''+を文字列型に変換するには：

<select ng-options="''+u.id as u.name for u in users"
16
Will Stern

関数では、以下のコードが追加され、ng-initから同じコードが呼び出されると、問題も解決されます。これにより、文字列比較の問題が解決します。

$scope.Ctrl.type = "" + $scope.Ctrl.type + "";
1
Pallab Bhowmik

私はあなたが選択された価値を始めなかったので起こります。 ng-initを使用して初期値を設定してみてください。

<select ng-model="Ctrl.type" 
       ng-options="addressType for addressType in Ctrl.getAddressTypes()"
       ng-init="Ctrl.type = ..."
       ></select>

このデモを参照してください Fiddle init値の有無にかかわらず2つのコンボがあります1つのコンボHTMLが次のように見えることがわかります。

<select ng-model="selectedItem1"
 ng-options="selectedItem1.name as selectedItem1.name for selectedItem1 in values" class="ng-pristine ng-valid">
   <option value="?" selected="selected"></option>
   <option value="0">General</option>
   <option value="1">Super</option>
   <option value="2">Trial</option>
 </select>

適切なもの：

<select ng-model="selectedItem" 
        ng-options="selectedItem.name as selectedItem.name for selectedItem in values" 
        ng-init="selectedItem = values[1].name" class="ng-pristine ng-valid">
   <option value="0">General</option>
   <option value="1" selected="selected">Super</option>
   <option value="2">Trial</option>
</select>
0
Maxim Shoustin