☰

AngularJS が select に空のオプションを含めるのはなぜですか? 質問する

tag-icon • tag-icon angularjs
AngularJS が select に空のオプションを含めるのはなぜですか? 質問する

私はここ数週間AngularJSを使っていますが、仕様書で定義されているすべての組み合わせや構成を試しても、http://docs.angularjs.org/api/ng.directive:select、選択要素の最初の子として空のオプションが引き続き表示されます。

これがジェイドです:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

ここでコントローラー:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

最後に、生成される HTML は次のようになります。

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

それを取り除くには何をする必要がありますか?

PS: これがなくても動作しますが、複数選択なしで select2 を使用すると見た目がおかしくなります。

ベストアンサー1

optionによって参照される値が、ng-modelに渡されるオプションのセットに存在しない場合、空が生成されますng-options。これは、偶発的なモデル選択を防ぐために発生します。AngularJS は、初期モデルが未定義であるか、オプションのセットに含まれていないことを認識し、独自にモデル値を決定したくないと考えます。

空のオプションを削除したい場合は、コントローラーで初期値を選択するだけです。次のようなものになります。

$scope.form.type = $scope.typeOptions[0].value;

jsFiddle はこちらです:http://jsfiddle.net/MTfRD/3/

つまり、空のオプションは、有効なモデルが選択されていないことを意味します (有効とは、オプション セットからという意味です)。この空のオプションを削除するには、有効なモデル値を選択する必要があります。

おすすめ記事