[解決済み] なぜ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/
要するに、空のオプションは、有効なモデルが選択されていないことを意味します(有効というのは、オプションのセットからという意味です)。この空のオプションを取り除くには、有効なモデルの値を選択する必要があります。
関連
-
angularjs ローカルデータストレージ LocalStorage
-
[解決済み] どのようにangularJSでrouteProviderとlocationProviderを設定するのですか?
-
[解決済み] angularjsで$compileを操作する
-
[解決済み] angularJSの::の意味するところ
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] ng-classを使った複数クラスの追加
-
[解決済み] AngularJSでコントローラを2回実行する場合の対処法
-
[解決済み] 条件に応じて特定のルートにリダイレクトする機能
-
[解決済み] AngularJSとng-repeatによるselectの初期化
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSで$httpリクエスト中にスピナーGIFを表示する?
-
[解決済み] ページロード時にAngularJSのコントローラ関数を実行する方法は?
-
[解決済み] Angular 1.2+ で ng-bind-html-unsafe を複製するために $sce.trustAsHtml(string) を使用するにはどうしたらよいですか?
-
[解決済み] AngularJS の ng-disabled ディレクティブに式を指定しても動作しない
-
[解決済み] AngularJS : ローカルストレージを使用する
-
[解決済み] Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] AngularJSでコントローラを2回実行する場合の対処法
-
[解決済み] ng-repeat :単一フィールドによるフィルタリング
-
[解決済み] AngularJSでEnterキーを押したときにフォームを送信する