AngularJS로 HTML select 요소에 null 값 설정하는 방법

AngularJS에서 HTML select 요소에 null 값 설정하기

AngularJS의 ng-model과 ng-options 디렉티브를 사용하면 드롭다운(select) 요소의 초기값을 null로 설정할 수 있습니다. 이 방식을 활용하면 사용자가 아직 아무것도 선택하지 않은 상태를 명확하게 표현할 수 있습니다.

컨트롤러 작성

null 값을 설정하려면 컨트롤러에서 모델 객체의 속성을 null로 초기화합니다. 다음은 컨트롤러 예제입니다.

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

위 코드에서 $scope.obj.selected가 null로 초기화되어 있기 때문에, 화면이 처음 렌더링될 때 select 요소에는 어떤 옵션도 선택되어 있지 않습니다.

템플릿(HTML) 작성

다음은 템플릿 코드입니다.

<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>

동작 원리

ng-options는 objects 배열의 각 항목을 순회하면서 value.id를 실제 값으로, value.value(Yes/No)를 화면에 표시되는 텍스트로 사용합니다. 여기에 value=""를 가진 기본 option("Unknown")을 추가하면, 모델 값이 null일 때 이 기본 옵션이 자동으로 선택된 상태로 표시됩니다.

사용자가 옵션을 선택하면 {{obj}} 데이터 바인딩을 통해 선택된 값이 즉시 화면에 반영되는 것을 확인할 수 있습니다. 이처럼 컨트롤러에서 모델을 null로 초기화하고 빈 값을 가진 option을 함께 두면, '미선택' 상태를 깔끔하게 처리할 수 있습니다.