AngularJS가 select에 빈 옵션을 포함하는 이유

질문 : 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>

그것을 제거하려면 어떻게해야합니까?

추신 : 이것 없이도 작동하지만 다중 선택없이 select2를 사용하면 이상하게 보입니다.

답변

---

빈 option 에 의해 참조 값 때 생성되는 ng-model 전달 옵션 세트에 존재하지 않는 ng-options . 이것은 우발적 인 모델 선택을 방지하기 위해 발생합니다. AngularJS는 초기 모델이 정의되지 않았거나 옵션 세트에없는 것을 확인할 수 있으며 자체적으로 모델 값을 결정하고 싶지 않습니다.

빈 옵션을 제거하려면 컨트롤러에서 초기 값을 선택하십시오.

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

다음은 jsFiddle입니다. http://jsfiddle.net/MTfRD/3/

간단히 말해서, 빈 옵션은 유효한 모델이 선택되지 않았 음을 의미합니다 (유효하다는 의미 : 옵션 세트에서). 이 빈 옵션을 제거하려면 유효한 모델 값을 선택해야합니다.

출처 : https://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select