AngularJSでHTMLの<select>要素にnull値を設定する方法

AngularJSでは、ng-optionsディレクティブを使って生成したセレクトボックス（<select>要素）に対して、value属性が空文字列の<option>タグを追加することで、モデルにnull値を設定できます。

コントローラーの実装

null値を設定するためのコントローラーは以下のとおりです。

function display($scope) {
    $scope.obj = {"selected": null};
    $scope.objects = [{id: 1, value: "Yes"}, {id: 0, value: "No"}];
}

ここでは、$scope.obj.selectedの初期値としてnullを設定しています。あわせて、選択肢のもとになるオブジェクト配列（「Yes」「No」）も定義しています。

テンプレートの記述

次に、テンプレート側のコードは以下のようになります。

<div ng-controller = "display">
    <select ng-model = "obj.selected"
        ng-options = "value.id as value.value for value in objects">
        <option value = "">Unknown</option>
    </select>
<br/>
    {{obj}}
</div>

ポイント解説

• <option value="">の役割：value属性が空のoptionタグを追加すると、ユーザーが「Unknown」を選択した時点でモデルの値が自動的にnullにリセットされます。これはAngularJSの標準的な動作として組み込まれている仕様です。
• ng-model：セレクトボックスで選択された値がobj.selectedにバインドされます。テンプレート内の{{obj}}を出力することで、現在のモデルの状態をリアルタイムに確認できます。
• ng-options：objects配列の内容をもとに選択肢を動的に生成し、各項目のidプロパティを値として使用しています。

このように、空のvalueを持つoptionを用意しておくだけで、未選択状態（null）をユーザーに明示的に選択させることができ、フォームの初期化や入力のリセット処理にも活用できます。