1. ホーム
  2. angularjs

[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?

2022-03-15 18:12:51

質問

ここ数週間AngularJSを使用していますが、1つだけとても気になることがあります。 http://docs.angularjs.org/api/ng.directive:select しかし、select 要素の最初の子要素として空のオプションが表示されます。

以下は、Jadeです。

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>

どうすればいいのでしょうか?

追伸:これがなくても物事は動きますが、複数選択せずにselect2を使用すると、ただただ奇妙に見えるだけです。

解決方法は?

空の option で参照される値がある場合、その値が生成されます。 ng-model に渡されたオプションの中に存在しない場合、そのオプションの値を変更することができます。 ng-options . これは、誤ってモデルを選択することを防ぐために起こります。AngularJSは、初期モデルが未定義であるか、オプションのセットに含まれていないことがわかり、自分自身でモデルの値を決定したくありません。

もし、空のオプションを取り除きたいなら、コントローラで初期値を選択するだけです。

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

以下は、jsFiddleです。 http://jsfiddle.net/MTfRD/3/

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